Threejs学习一，场景Scene、相机Camera、渲染器renderer

最新推荐文章于 2024-05-20 08:47:19 发布

小小并不小

最新推荐文章于 2024-05-20 08:47:19 发布

阅读量194

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/c153284575/article/details/129836167

版权

这里写自定义目录标题

threejs中文网

视频学习

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js</title>
    <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
    <script type="importmap">
        {
            "imports": {
                "three": "./three.module.js"
            }
        }
    </script>
</head>
<body>
    <div id="webgl"></div>
    <script src="./index.js" type="module"></script>
</body>
</html>

index.js

import * as THREE from 'three';

// 浏览器控制台测试，是否引入成功
console.log(THREE.Scene);
let width = 800, height = 500 
// 1、创建一个三维场景 Scene
const scene = new THREE.Scene()

// 2、定义一个几何体, 长宽高100
const geometry = new THREE.BoxGeometry(100, 100, 100);

// 3、创建一个材质对象
const material = new THREE.MeshBasicMaterial({color: 0xff0000})

// 4、创建一个网格模型，表示生活中的物体
const mesh = new THREE.Mesh(geometry, material)
// 设置位置
mesh.position.set(0, 10, 0)

// 把mesh添加到场景中
scene.add(mesh)

// 5、创建一个透视相机对象Camera
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 1000 );
// 设置相机的位置
camera.position.set(200, 200, 200)
// 相机的视线，观察目标点的坐标
// camera.lookAt(0,0,0)
camera.lookAt(mesh.position) // 指向网格模型

// 6、创建一个webGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height ); // 设置canvas画布宽高
renderer.render( scene, camera ); // 执行渲染操作，类似于拍照动作，咔

// 7、把渲染结果canvas画布（照片），添加到网页上
// document.body.appendChild( renderer.domElement );
document.getElementById("webgl").appendChild(renderer.domElement)