three.js展示实例代码

最新推荐文章于 2023-07-22 23:10:04 发布

圣焱

最新推荐文章于 2023-07-22 23:10:04 发布

阅读量584

点赞数

分类专栏： three.js 文章标签： javascript

本文链接：https://blog.csdn.net/Bruce_byan/article/details/129174446

版权

three.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：简述

在一个单html页面展示一个旋转的立方体三维结构，页面左上角Stats性能监视器监测旋转动画刷新帧率。

二：源码展示

index.html页面

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>简单立方体</title>
        <style>
            body{
                overflow: hidden;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
        <script type="importmap">
            {
                "imports" : {
                    "three" : "../three.js/build/three.module.js",
                    "three/addons/" : "../three.js/examples/jsm/"
                }
            }
        </script>
        <script src="./index.js" type="module"></script>
    </body>
    
</html>

index.js

import * as THREE from "three"

import { OrbitControls } from "three/addons/controls/OrbitControls.js"

//引入性能监视器stats.js,显示帧率
import Stats from 'three/addons/libs/stats.module.js';
//创建stats对象
const stats = new Stats();
//Stats.domElement:web页面上输出计算结果,一个div元素
document.body.appendChild(stats.domElement);

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

// 创建网格模型对象
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 漫反射网格材质；MeshLambertMaterial
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, //设置材质颜色
    transparent: true, //开启透明
    opacity: 0.5, //设置透明度
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

//添加辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

//添加光源
const ambient = new THREE.AmbientLight(0xffffff,0.4);//环境光
scene.add(ambient);
const directionalLight = new THREE.DirectionalLight(0xffffff,0.8);//平行光
directionalLight.position.set(100,200,150);
scene.add(directionalLight);


//创建相机
const height = window.innerHeight;//相机切面 高
const width = window.innerWidth;//宽
const camera = new THREE.PerspectiveCamera(30, width / height, 1 , 3000);//透明相机 模拟人眼或相机 一个四棱的视椎体 椎体内的物体为可渲染展示的内容 (切面角度,宽高比,近端视角切面距离,远端视角切面距离)
camera.position.set(150,250,250);//相机在场景的位置
camera.lookAt(0,0,0);//相机在场景中朝向的坐标位置

//创建渲染器 相当于照片
const renderer = new THREE.WebGLRenderer({
    antialias:true,//抗锯齿
});
//渲染画布的宽与高
renderer.setSize(width,height);
//渲染3d场景图
renderer.render(scene,camera);
//存入网页节点
document.body.appendChild(renderer.domElement);

//渲染器编译方式
renderer.outputEncoding = THREE.sRGBEncoding;

//相机轨道控制器 添加后可以移动相机视角
const controls = new OrbitControls(camera,renderer.domElement);

//渲染循环
function render(){
    stats.update();//刷新帧率展示
    renderer.render(scene,camera);//重新渲染
    mesh.rotateY(0.01);//绕y轴旋转
    requestAnimationFrame(render);//反复执行
}
//启动渲染循环
render();

//监控窗口变化 重新设定视角长宽比及渲染画布长宽比 避免场景变形
window.onresize = () => {
    renderer.setSize(window.innerWidth , window.innerHeight);//重新渲染画布大小
    camera.aspect = window.innerWidth / window.innerHeight; //重设相机长宽比
    camera.updateProjectionMatrix();//更新相机属性
}