three.js学习

一个新的领域。

demo1:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<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.appendChild(renderer.domElement);//将渲染器加入文档中

        var geometry = new THREE.CubeGeometry(1,1,1);//创建物体

        var material = new THREE.MeshBasicMaterial({color: 0xffff00});//创建物体

        var cube = new THREE.Mesh(geometry, material);//创建物体

        scene.add(cube);//将物体添加到场景中；

        camera.position.z = 5;

        function render() {
            requestAnimationFrame(render);

//render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让render()再执行一次，形成循环；
            
            cube.rotation.x += 0.1;//设置物体角度
            cube.rotation.y += 0.1;//设置物体角度
            renderer.render(scene, camera);将场景和相机放入渲染器中；
        }
        render();
    </script>
</body>
</html>

来源：CSDN

作者：newway007

链接：https://blog.csdn.net/newway007/article/details/103835307

标签

canvas

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!