three.js制作一个立体几何体

最新推荐文章于 2024-07-13 10:45:00 发布

Mr_F6

最新推荐文章于 2024-07-13 10:45:00 发布

阅读量1.6k

点赞数 2

文章标签： three-js

本文链接：https://blog.csdn.net/HZDZKJDXchenpeng/article/details/50808804

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a_threeJS_one</title>
    <style>
        #canvas{
            width:1100px;
            height:600px;
            background:palevioletred;
            border:1px solid;
        }
    </style>
    <!--步骤（自认为）
    1.设置three.js渲染器
    2.设置场景scene
    3.设置物体object
    4.设置摄像机camera
    5.设置光源light
    -->
    <script type="text/javascript" src="three.js"></script>
    <script>
//        渲染器
        var renderer;
        function init_Three_renderer(){
            width = document.getElementById("canvas").clientWidth;
            height = document.getElementById("canvas").clientHeight;
            renderer = new THREE.WebGLRenderer({    //生成渲染对象
                antialias : true    //去锯齿
            });
            renderer.setSize(width,height);//设置渲染的宽度和高度；
            document.getElementById("canvas").appendChild(renderer.domElement);
            renderer.setClearColor(0xEEEEEE,1);//设置渲染的颜色；
        }
//        场景
        var scene;
        function init_Three_scene(){
            scene = new THREE.Scene();
        }
//        物体
        var object;
        function init_Three_object(){
            var geometry = new THREE.CubeGeometry(20, 20, 20);   //几何体 （长，宽，高）
            var material = new THREE.MeshLambertMaterial({color:0x00ff00});   //材料
            var cube = new THREE.Mesh(geometry,material);
            cube.position.set(0,0,0);      //设置几何体的位置（x,y,z）
            scene.add(cube);
        }
//        相机
        var camera;
        function init_Three_camera(){
            camera = new THREE.PerspectiveCamera(50,width/height,1,5000);   //透视相机
            // （可视角度，可视范围的长宽比，相对于深度剪切面的近的距离 必须为正数，相对于深度剪切面的远的距离 必须为正数）
            camera.position.x = 20
            camera.position.y = 20;
            camera.position.z = 50;

            camera.up.x = 0;//设置相机的上为「x」轴方向
            camera.up.y = 1;//设置相机的上为「y」轴方向
            camera.up.z = 0;//设置相机的上为「z」轴方向
            camera.lookAt({x:0,y:0,z:0}); //设置视野的中心坐标
        }
//        光源
        var light;
        function init_Three_light(){
            light = new THREE.DirectionalLight(0xffffff,1);//设置平行光源 (光颜色，光强度)
            light.position.set(10,30,20);//设置光源向量 (x,y,z)
            scene.add(light);
        }

        function ThreeJs_Main(){
            init_Three_renderer();//渲染
            init_Three_scene();//场景
            init_Three_object();//物体
            init_Three_camera();//相机
            init_Three_light();//光源
            renderer.clear();
            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="ThreeJs_Main()">
    <div id="canvas"></div>
</body>
</html>

Mr_F6

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js制作一个立体几何体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>a_threeJS_one</title> <style> #canvas{ width:1100px; height:600px; backgrou
复制链接

扫一扫