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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a_threeJS_onetitle>
    <style>
        #canvas{
            width:1100px;
            height:600px;
            background:palevioletred;
            border:1px solid;
        }
    style>
    
    <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>

你可能感兴趣的:(three.js制作一个立体几何体)