react+three实现波纹动态效果代码
代码语言:html
所属分类:动画
代码描述:react+three实现波纹动态效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
background-color: #3c3c3f;
}
.c-react-canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.js"></script>
<script>
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const Threelium = {};
(scope => {
class Scene extends THREE.Scene {
constructor({
camera,
controls,
...restProps })
{
super();
const {
props: {
children } } =
this.initialize(restProps);
this.entities = React.Children.map(children, child => {
const entity = new child.type({
camera,
controls,
...child.props });
this.add(entity);
return entity;
});
}
animate(timeDelta) {
this.entities.forEach(entity => {
entity.time += timeDelta;
if (entity.update) {
entity.update(timeDelta);
}
});
}
dispose() {
this.entities.forEach(e => e.dispose && e.dispose());
super.dispose();
}}
scope.Scene = Scene;
class ThreeRenderer extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "setDimensions",
() => {
const width = window.innerWidth;
const height = window.innerHeight;
this.renderer.setSize(width, height);
this.camera.aspect = width / height;
if (this.camera.updateProjectionMatrix) {
this.camera.updateProjectionMatrix();
}
if (this.controls && this.controls.handleResize) {
this.controls.handleResize();
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0