three.js学习

最新推荐文章于 2022-12-23 15:09:18 发布

newway007

最新推荐文章于 2022-12-23 15:09:18 发布

阅读量90

点赞数

分类专栏： three.js

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

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一个新的领域。

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>

newway007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js学习

一个新的领域。demo1:<!DOCTYPE html><html><head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="js/three.js"...
复制链接

扫一扫

专栏目录