three.js旋转的场景canvas_camera_orthographic

最新推荐文章于 2024-07-07 11:52:20 发布

人工智能-肥鹅

最新推荐文章于 2024-07-07 11:52:20 发布

阅读量1k

点赞数

分类专栏： three.js 文章标签： three.js 旋转3D

本文链接：https://blog.csdn.net/kfyzjd2008/article/details/79352322

版权

three.js 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

官方示例 canvas_camera_orthographic.html

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="build/three.js"></script>

    <script src="js/renderers/Projector.js"></script>
    <script src="js/renderers/CanvasRenderer.js"></script>

    <script src="js/libs/stats.min.js"></script>
    <style>
        body{
            font-family: monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body onload="threeStart();">
    <div id="canvas"></div>
    <script>

        var container,stats;
        var camera,scene,renderer;
        var frustumSize = 1000;

        function initThree(){
            container = document.getElementById('canvas');
            stats = new Stats();
			container.appendChild( stats.domElement );
        }

        function initRenderer(){

            renderer = new THREE.CanvasRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);//设置像素比例
            renderer.setSize(window.innerWidth,window.innerHeight);
            container.appendChild(renderer.domElement);

        }

        function initScene(){

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xf0f0f0);

        }

        function initCamera(){

            var aspect = window.innerWidth / window.innerHeight;
            camera = new THREE.OrthographicCamera(frustumSize * aspect / -2,frustumSize * aspect / 2,frustumSize / 2, frustumSize / -2,1,2000);
            camera.position.y = 400;

        }

        function initLight(){

            var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
            scene.add(ambientLight);

            var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add(directionalLight);

            var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add(directionalLight);

        }

        function initObject(){
            var geometry = new THREE.BoxGeometry(50,50,50);//盒子 模型
            var material = new THREE.MeshLambertMaterial({color:0xffffff,overdraw:0.5});//overdraw（过度描绘）

            for( var i = 0; i < 100; i++){

                var cube = new THREE.Mesh(geometry,material);

                cube.scale.y = Math.floor(Math.random() * 2 + 1);

                cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
                console.log(cube.position.x);
                cube.position.y = (cube.scale.y * 50) / 2;
                cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;

                scene.add(cube);
            }

            var gridHelper = new THREE.GridHelper(1000,20);//网格辅助 网格大小,步长
            scene.add(gridHelper);
        }

        function threeStart(){
            initThree();
            initRenderer();
            initScene();
            initCamera();
            initLight();
            initObject();
            animation();
        }

        function animation(){

            requestAnimationFrame(animation);
			render();
            //更新性能监视窗口
            stats.update();
            
        }

        function render(){
            var timer = Date.now() * 0.0001;
            camera.position.x = Math.cos(timer) * 800;
            camera.position.z = Math.sin(timer) * 800;
            camera.lookAt(scene.position);

            renderer.render(scene,camera);
        }
    </script>
    
</body>
</html>

人工智能-肥鹅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
three.js旋转的场景canvas_camera_orthographic

官方示例canvas_camera_orthographic.html代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wi
复制链接

扫一扫