THREEJS 第二章立方体动起来

最新推荐文章于 2024-02-01 16:56:56 发布

Chase_freedom

最新推荐文章于 2024-02-01 16:56:56 发布

阅读量2.4k

点赞数

分类专栏： THREE.js 文章标签： THREEJS html5 javascript webgl

本文链接：https://blog.csdn.net/Chase_freedom/article/details/46052463

版权

THREE.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近很忙，一直在做项目但是毫无进展，所以最近一直没有更新博客，自己写这个博客主要是想，一来是记录一下自己的学习历程，同时给新手一些自己的学习历程，毕竟个人认为学习一门学科，最好的方法就是学习这门学科的历史，我写这个博客的的学习经历，也算是一个人的学习历程的历史，以及自己对three.js的思考过程。一直不知道到底从哪里比较合适，最后想明白了，就从three.js的官方demo做起吧，因为自己也是在学习，就写一些简单的入门的知识吧。虽然three说是公开的，大家可以自由的下载演示学习，但是实际上很多人没有自己认真看过每一个demo，那我就把我看过的demo展示出来给大家，希望能够在普及three.js略尽绵薄之力，但是官方demo完全是展示three.js的各方面功能特性，不适合初始学习，要入门的话有两个地方推荐，一是webgl中文网，我是边看webgl入门一边看webgl中文网的免费教程。

（对了我已经放弃了编辑器vs，因为iis服务器对webgl模型支持的不是很好，虽然可以不使用iis，但是我只是迁怒于它，webstorm也放弃了，因为太占内存了，过不了几分钟就开始各种卡，可能我机器太水了吧）

首先贴个教程来自webgl入门指南https://github.com/tparisi/WebGLBook/blob/master/Chapter/202/example2-1.html

<!DOCTYPE html>
<html>
<head>
<title>A Simpl99999e Three.js Page</title>

   <script src="../libs/Three.js"></script>
   <script>
   function onLoad()
   {
       // Grab our container div抓取div作为容器
        var container = document.getElementById("container");

        // Create the Three.js renderer, add it to our div创建renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild( renderer.domElement );

// Create a new Three.js scene创建场景
var scene = new THREE.Scene();

// Create a camera and add it to the scene创建相机一共有三种相机PerspectiveCamera，OrthographicCamera，CubeCamera

       //前两周较为常用，但是实际上我们现在就用一种PerspectiveCamera
        var camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
        camera.position.set( 0, 0, 3);
        scene.add( camera );

        // Create a directional light to show off the object//创建灯光灯光就有很多种这里是方向光还有点光源，聚光灯，区域光，等等
        var light = new THREE.DirectionalLight(0x000000, 1.5);
        light.position.set(0, 0, 1);
        scene.add(light);

        // Create a shaded, texture-mapped cube and add it to the scene创建一个映射贴图立方体，添加到场景
        // First, create the texture map 实际上就是把一个贴图的地址传入THREE.ImageUtils.loadTexture（）

var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);

        // Now, create a Phong material to show shading; pass in the map创建一个phong(冯氏)材质类型，添加贴图
        var material = new THREE.MeshPhongMaterial({ map: map });

        // Create the cube geometry创建一个立方体。几何体的vertices变量，用来存放点,用一个个点组成的模型
        var geometry = new THREE.CubeGeometry(1, 1, 1);

        // And put the geometry and material together into a mesh 用很多点组成的模型和颜色或者材质组成网格mesh
        cube = new THREE.Mesh(geometry, material);

        // Turn it toward the scene, or we won't see the cube shape!这里就在设置cube的x方向上和y方向上rotation（旋转）
         cube.rotation.x = Math.PI / 5;
        cube.rotation.y = Math.PI / 5;

        // Add the cube to our scene添加cube到scene
        scene.add(cube);

        // Render it渲染时添加场景，也就是mesh 灯光（全在scene场景里面了）以及相机
        renderer.render(scene, camera);
        run();//不断的一帧一帧重绘，为什么呢，看下面
   }

   function run() {

//实际在运行效果上面我们可以看出上面的cube在旋转，但是我们在写代码的时候cube只是在x和y方向只是各旋转了一次

//不科学啊，我只是叫它旋转一次，为什么现在cube根本停不下来啊，奥秘就在这里requestAnimationFrame(run)，用requestAnimationFrame（）不断的绘制

//一帧一次旋转Math.PI / 5;但是一秒钟旋转了很多次，所以他就动起来了，就像电影一样，电影本身也是一帧一帧的，一秒钟展示超过24帧于是就动起来了

//这也向我们揭示了three.js本质是一个绘图的库，我们只是不停重绘才实现了动态的效果。

//同时我们以后会不断的使用类似这样的结构，绘出一个画面，然后不断的重绘实现动态效果

        renderer.render(scene, camera);
        requestAnimationFrame(run);
   }

   </script>

</head>
<body onLoad="onLoad();">
    <div id="container" style="width:500px; height:500px; background-color:#000000"></div>

</body>
</html>

Chase_freedom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
THREEJS 第二章立方体动起来

最近很忙，一直在做项目但是毫无进展，所以最近一直没有更新博客，自己写这个博客主要是想，一来是记录一下自己的学习历程，同时给新手一些自己的学习历程，毕竟个人认为学习一门学科，最好的方法就是学习这门学科的历史，我写这个博客的的学习经历，也算是一个人的学习历程的历史，以及自己对three.js的思考过程。一直不知道到底从哪里比较合适，最后想明白了，就从three.js的官方demo做起吧，因为自己也是在
复制链接

扫一扫