Three.js--2.用Three.js 创建你的第一个三维场景

最新推荐文章于 2024-05-30 11:09:46 发布

屋顶上的小喵

最新推荐文章于 2024-05-30 11:09:46 发布

阅读量882

点赞数

分类专栏： Three.js 文章标签： Three.js 三维场景 3D vivi 这世界唯一的妳

本文链接：https://blog.csdn.net/vivian_1122/article/details/86698095

版权

Three.js 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

1.了解场景的三大组件

在Three.js 中，要渲染物体到网页中，我们需要3个组件：

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

有了这3样东西，才能将物体渲染到网页中去。

创建三要素的代码如下：

2.添加辅助的坐标轴和平面

// 创建一个场景，该场景将保存所有的元素，如对象，相机和灯光

 var scene = new THREE.Scene();
 
// 创建一个摄像机，它定义了我们要看的地方
// PerspectiveCamera的4个参数：
// 第一个参数：是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，
// 它的值是一个角度。
// 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的比值。
// 比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的；
// 接下来的两个参数是远剪切面和近剪切面。 也就是说当物体所在的位置比摄像机的远剪切面远或者所在
// 位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响，
// 但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它;
 
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
 
// 创建一个渲染器并设置背景颜色和大小
// 保持应用程序的尺寸，但是以较低的分辨率来渲染，可以在调用setSize时，给updateStyle（第三个参数）
// 传入false。调用setSize(window.innerWidth/2, window.innerHeight/2, false)将使得你的应用程
// 序以一半的分辨率来进行渲染;

var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xcccccc));
renderer.setSize(window.innerWidth,window.innerHeight);

我们有了一个基本上是空白的scene,一个renderer 和一个camera,但是还没有要渲染的东西，下面

的代码用来添加辅助的坐标轴和平面：

//在屏幕上显示轴
var axis = new THREE.AxisHelper(20);

//将轴添加到场景中
scene.add(axis);

// 创建地平面
 var planeGeometry = new THREE.PlaneGeometry(60,20);
 var planeMaterial = new THREE.MeshBasicMaterial({color:0x055516});
 var plane = new THREE.Mesh(planeGeometry,planeMaterial);
            
//旋转并定位平面
 plane.rotation.x = -0.5*Math.PI;
 plane.position.x = 15;
 plane.position.y = 0;
 plane.position.z = 0;

//把平面添加到场景中
 scene.add(plane)

3.指定相机的位置，确保相机能够拍摄到这些物体

camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;

//为了确保相机能够拍摄到这些物体，我们使用了lookAt()函数指向场景的中心
camera.lookAt(scene.position);

4.输出元素，渲染场景

document.getElementById('dv').appendChild(renderer.domElement)
renderer.render(scene, camera)

5.完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这世界唯一的妳</title>
</head>
<script src="./libs/three.js"></script>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
</style>

<body onload="init();">
    <div id="dv"></div>
    <script>
        function init() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColorHex(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);

            var axis = new THREE.AxisHelper(20);
            scene.add(axis);

            var planeGeometry = new THREE.PlaneGeometry(60, 20);
            var planeMaterial = new THREE.MeshBasicMaterial({
                color: 0xcccccc
            });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -0.5 * Math.PI
            plane.position.x = 10;
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane)

            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);
            document.getElementById('dv').appendChild(renderer.domElement)
            renderer.render(scene, camera)
        }
    </script>
</body>

</html>

下一节，在场景中添加方块和球体

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three.js--2.用Three.js 创建你的第一个三维场景

1.了解场景的三大组件在Three.js 中，要渲染物体到网页中，我们需要3个组件：场景（scene）相机（camera）渲染器（renderer）有了这3样东西，才能将物体渲染到网页中去。创建三要素的代码如下：2.添加辅助的坐标轴和平面// 创建一个场景，该场景将保存所有的元素，如对象，相机和灯光 var scene = new THREE.Scene();...
复制链接

扫一扫