Three.js零基础入门教程(郭隆邦)周期性渲染

程序员文章站 2024-03-16 19:42:34
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周期性渲染</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>
<style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
</style>
<body>

</body>
<script>
    var  scene=new THREE.Scene();
    var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
    var renderer =new  THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight)
    document.body.append(renderer.domElement)
    var geometry =new THREE.BoxGeometry(1,1,1)
    var material= new THREE.MeshBasicMaterial({color:0x00ff00});
    var mesh=new THREE.Mesh(geometry,material)
    scene.add(mesh)
    camera.position.z = 5;
    var render = function(){
        renderer.render( scene, camera );
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    }
    setInterval("render()",20);
</script>
</html>