0
点赞
收藏
分享

微信扫一扫

Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景

yellowone 2022-04-29 阅读 60

Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景

目录

Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景

一、简单介绍

二、Three 中构建场景主要的三要素

三、场景(Scene)

四、摄像机(Camera)

五、WebGLRenderer

六、第一个入门 Web 3D 场景


一、简单介绍

Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

本节介绍, three.js (webgl)入门的第一个代码程序,实现一个3D场景的构建,和显示,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

二、Three 中构建场景主要的三要素

在Three js 中创建场景显示,一般需要使用到 Three 中的三要素(三个部分):

1、场景 scene(new THREE.Scene()),场景中可能还包含,几何体、光照等

2、相机 Camera,好似人的眼睛,有位置,有方向,有远近的观察场景中的物体

3、渲染器 Renderer ,把 Camera 看到 Scene 中的景象显示出来,显示在屏幕上

三、场景(Scene)

场景能够让你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。

 

四、摄像机(Camera)

摄像机的抽象基类。在构建新摄像机时,应始终继承此类。

五、WebGLRenderer

WebGL Render 用WebGL渲染出你精心制作的场景。

属性方法篇幅过长这里不在赘述,大家可以参考:three.js docs

六、第一个入门 Web 3D 场景

1、引入 Three js

  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

2、创建 Scene

    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

3、创建 Camera

    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

4、创建 Renderer

    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xcccccc, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

5、效果预览

 6、关键代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x00ccff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(100, 100, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0xcccc00);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xcccccc, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>
</body>
</html>

7、简单程序代码导图

 

举报

相关推荐

0 条评论