three.js 学习之旅day01

最新推荐文章于 2024-08-30 07:26:14 发布

_小太子

最新推荐文章于 2024-08-30 07:26:14 发布

阅读量379

点赞数 1

分类专栏： obj结合web页面进行展示文章标签： three.js obj文件展示到web页面 3D立体模型 three webDL学习心得

本文链接：https://blog.csdn.net/Teemo_shape/article/details/78919062

版权

obj结合web页面进行展示专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一个框架的效果是显示一个绿色的正方体<!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: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>
一个黑色背景的绿色正方体；在不停的旋转；


三大组建 


场景（scene）、相机（camera）和渲染器（renderer）

场景是容器，装其他的东西的，所有的要显示的全部要放到容器里面去，而且只能有一个；

相机决定了那个场景会显示出来，就像人的眼睛 视觉方向，场景只有一个但是相机可以 有很多个，常用的是透视相机（PerspectiveCamera）
渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制渲染器renderer的domElement元素，
表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，
这样渲染的结果就能够在页面中显示了。




渲染分两种：离线渲染和即时渲染；

离线渲染：我对这个的理解就是电影的帧是先处理好的，如果实时渲染的话，会出现画面卡顿。

实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。下面就是一个渲染循环：

 
 

  
  

   
   View Raw Code
   
   ?
  
  

  
  

   
   

    
    
     
     
1
    
    

    
    
     
     
2
    
    

    
    
     
     
3
    
    

    
    
     
     
4
    
    

    
    
     
     
5
    
    

    
    
     
     
6
    
    

   
   

   
   

    
     function  render() {
 cube.rotation.x  +=  0.1;
 cube.rotation.y  +=  0.1;
 renderer.render(scene, camera);
 requestAnimationFrame(render);
 }

   
   

  
  

 
 




requestAnimationFrame 函数的调用的话，让浏览器执行一次参数中的函数，render 调用requestAnimationFrame ，
requestAnimationFrame调用render 这样就会出现循环 ；游戏里面有挺多这样的循环的；
三者的关系是    场景加载了不同的角色 ----》 相机视角拍到的图片----》传给渲染器，在浏览器里面显示出来。