01-three.js 笔记 - 创建第一个三维场景

参考资料是《three.js开发指南》这本书第一章的示例和讲解。
本示例浏览地址：http://www.ithanmang.com/threejshome/20180623/01-basic-scene.html
由下图可以看到，场景中只有一个平面和一个立方体。
这里写图片描述
下面是参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渲染并展示三维对象</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../libs/jquery-1.9.1.min.js"></script>
    <script src="../libs/build/three.js"></script>

</head>
<body>

<div id="WebGL-output"></div>
<script>

    $(function () {

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

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);

        // 创建渲染器
        var webGLRenderer = new THREE.WebGLRenderer();

        // 配置相机
        camera.position.set(200, 150, 200);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 配置渲染器
        webGLRenderer.antialias = true;
        webGLRenderer.autoClear = true;
        webGLRenderer.setClearColor(0x050505);
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        // 创建灯光
        var ambientLight = new THREE.AmbientLight({color: 0x404040});
        scene.add(ambientLight);

        // 添加光源
        var spotLight = new THREE.SpotLight(0xcccccc);
        spotLight.position.set(-100, 300, 10);
        scene.add(spotLight);


        // 创建平面
        var planeGeometry = new THREE.PlaneGeometry(200, 400);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xCCCCCC});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // 绕x轴旋转90度
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -10;
        plane.position.x = -10;
        plane.position.z = -80;
        scene.add(plane);

        // 创建立方体
        var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.y = 30;
        cube.position.x = 10;
        cube.position.z = -30;
        cube.castShadow = true;
        scene.add(cube);

        // 把渲染的页面添加到div
        $("#WebGL-output").append(webGLRenderer.domElement);

        // 开始渲染
        webGLRenderer.render(scene, camera);
    });

</script>

</body>
</html>

这个示例非常简单，三维场景中仅仅只有三个对象，一个是平面（plane）和立方体（cube），以及灯光（Light），从代码中可以知道，添加了ambientLight 环境光和spotLight 点光。

编写步骤

1.引入 js函数库。

<script src="../libs/jquery-1.9.1.min.js"></script>
<script src="../libs/build/three.js"></script>

2.调整页面样式，避免出现下拉框。

<style>
    body {
        margin: 0;
        overflow: hidden;
    }
</style>

3.开始搭建三维场景

 $(function () {
  // 此处是构建场景的代码
 }

场景构建具体步骤

1.创建Scene场景

 var scene = new THREE.Scene();

2.创建相机，并配置

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
// 配置相机
 camera.position.set(200, 150, 200);
 camera.lookAt(new THREE.Vector3(0, 0, 0));

3.创建渲染器并配置

// 创建渲染器
var webGLRenderer = new THREE.WebGLRenderer();
// 配置渲染器
webGLRenderer.antialias = true;//开启抗锯齿效果
webGLRenderer.autoClear = true;//自动清除
webGLRenderer.setClearColor(0x050505);//设置背景色
webGLRenderer.setSize(window.innerWidth, window.innerHeight);//渲染范围

4.创建灯光，并加入到场景

// 创建灯光
var ambientLight = new THREE.AmbientLight({color: 0x404040});
scene.add(ambientLight);

// 添加光源
var spotLight = new THREE.SpotLight(0xcccccc);
spotLight.position.set(-100, 300, 10);
scene.add(spotLight);

5.创建平面和立方体对象

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(200, 400);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xCCCCCC});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

// 绕x轴旋转90度
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -10;
plane.position.x = -10;
plane.position.z = -80;
scene.add(plane);

// 创建立方体
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.y = 30;
cube.position.x = 10;
cube.position.z = -30;
cube.castShadow = true;
scene.add(cube);

6.把渲染结果添加到页面

// 把渲染的页面添加到div
$("#WebGL-output").append(webGLRenderer.domElement);

7.通过渲染器调用选render方法开始渲染

// 开始渲染
webGLRenderer.render(scene, camera);

已上就是整个示例的完步骤，需要注意的是，灯光的位置以及平面的位置谁不可能一下子就定下来的，需要不断的进行调整才能达到非常好的效果。

01-three.js 笔记 - 创建第一个三维场景

编写步骤

场景构建具体步骤

猜你喜欢