初入three.js

最新推荐文章于 2023-09-25 20:04:43 发布

蔚蓝balala

最新推荐文章于 2023-09-25 20:04:43 发布

阅读量677

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Ailey_YY/article/details/42459491

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="javascript"><!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <title>three.js.try1</title>
        <!--引入Three.js-->
        <script src="../Three.js"></script>
             <script>
             //开启three.js渲染器
                var renderer;
                function initThree(){
                  width = document.getElementsById('canvas3d').clientWidth;      //get the width of "canvas3d"
                  height = document.getElementsById('canvas3d').clientHeight;      //get the hight of "canvas3d"
                  renderer = new THREE.WebGLRenderer({antialias:true});         //create a object of renderer
                  renderer.setSize(width,height);          //the height of the renderer as same as "canvas3d"
                  document.getElementsById('canvas3d').appendChild(renderer.domElement);         //追加【canvas】元素到【canvas3d】元素中
                  renderer.setClearColorHex(0xFFFFFF,1.0);       //set the BGC of the canvas(clearColor)
                }
            //设置相机
                var cameras;
                function initCamera(){
                  camera = new THREE.PerspectiveCamera(45,width / height,1,5000);
                            //(视野角：fov,纵横比：aspect,相机离视体积最近的距离：near,相机离视体积最远的距离：far)
                  camera.position.x = 0;     
                  camera.position.y = 50;
                  camera.position.z = 100;           //相机的位置坐标
                  camera.up.x = 0;                   //相机的上为x轴方向
                  camera.up.y = 1;                   //相机的上为y轴方向
                  camera.up.z = 0;                   //相机的上为z轴方向
                  camera.lookAt = ({x:0,y:0,z:0});   //相机视野中心坐标
                }

            //设置场景（场景就是一个三维空间）
                var scene ;
                function initScene(){
                  scene = new THREE.Scene();
                }

            //设置光源
                var light;
                function initLight(){
                  light = new THREE.DirectionalLight(0xff0000,1.0,0);      //设置平行光源
                  light.position.set(200,200,200);          //设置光源向量
                  sence.add(light);           //追加光源到场景
                }

            //终于到了设置物体了
                var sphere;
                function initObject(){
                  sphere = new THREE.Mesh(
                    new THREE.CubeGeometry(180,180,180),              //形状设定
                    new THREE.MeshLambertMaterial({color:0xff0000})    //材质设定
                    )；
                  scene.add(sphere);               //追加物体到场景
                  sphere.position.set(0,0,0);
                }

            //写一个主函数完成上面五步
                function threeStart(){
                  initThree();
                  initCamera();
                  initScene();
                  initLight();
                  initObject();
                  renderer.clear();
                  renderer.render(scene,camera);
                }

        </script>
        <style type="text/css">
            div#canvas3d{
                  border: none;
                  cursor: pointer;
                  width: 1280px;
                  height: 600px;
                  background-color: #EEEEEE;
                }
        </style>
    </head>

    <body onload = 'threeStart();'>
        <!--盛放canvas的容器-->
        <div id="canvas3d">
        </div>
    </body>

</html>

蔚蓝balala

关注

0
点赞
踩
1

收藏

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

three.js.try1 //开启three.js渲染器 var renderer; function initThree(){ width = document.getElementsById('canva
复制链接

扫一扫