Three.js初识：渲染立方体、3d字体、修改渲染背景颜色

news2025/11/4 8:04:07

用场景对three.js进行渲染：场景、相机、渲染器

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

场景

function Scene() {

  Object3D.call( this );

  this.type = 'Scene';

  this.background = null;
  this.fog = null;
  this.overrideMaterial = null;

  this.autoUpdate = true; // checked by the renderer

}

透视摄影机

参数解析：

  • fov: 视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
  • aspect: 长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
  • near: 近截面（near）
  • far: 远截面（far）
function PerspectiveCamera( fov, aspect, near, far ) {

  Camera.call( this );

  this.type = 'PerspectiveCamera';

  this.fov = fov !== undefined ? fov : 50;
  this.zoom = 1;

  this.near = near !== undefined ? near : 0.1;
  this.far = far !== undefined ? far : 2000;
  this.focus = 10;

  this.aspect = aspect !== undefined ? aspect : 1;
  this.view = null;

  this.filmGauge = 35;	// width of the film (default in millimeters)
  this.filmOffset = 0;	// horizontal film offset (same unit as gauge)

  this.updateProjectionMatrix();

}

渲染器

function WebGLRenderer( parameters ) {

  console.log( 'THREE.WebGLRenderer', REVISION );

  parameters = parameters || {};
  //...
}

浅试

创建一个渲染场景，没有物体

<!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>Document</title>
  <!-- <script src="./three.js"></script> -->
  <style type="text/css">
    body {
      overflow: hidden;
      margin: 0;
    }
  </style>
  <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
</head>

<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  </script>
</body>

</html>

创建一个物体

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

立方体(BoxGeometry)

参数解析

  • width ：X轴上面的宽度，默认值为1。
  • height ：Y轴上面的高度，默认值为1。
  • depth ：Z轴上面的深度，默认值为1。
  • widthSegments ：可选）宽度的分段数，默认值是1。
  • heightSegments ：（可选）高度的分段数，默认值是1。
  • depthSegments ：可选）深度的分段数，默认值是1
function BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) {

  Geometry.call( this );

  this.type = 'BoxGeometry';

  this.parameters = {
    width: width,
    height: height,
    depth: depth,
    widthSegments: widthSegments,
    heightSegments: heightSegments,
    depthSegments: depthSegments
  };

  this.fromBufferGeometry( new BoxBufferGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) );
  this.mergeVertices();

}

材质

function MeshBasicMaterial( parameters ) {

  Material.call( this );

  this.type = 'MeshBasicMaterial';

  this.color = new Color( 0xffffff ); // emissive

  this.map = null;

  this.lightMap = null;
  this.lightMapIntensity = 1.0;

  this.aoMap = null;
  this.aoMapIntensity = 1.0;

  this.specularMap = null;

  this.alphaMap = null;

  this.envMap = null;
  this.combine = MultiplyOperation;
  this.reflectivity = 1;
  this.refractionRatio = 0.98;

  this.wireframe = false;
  this.wireframeLinewidth = 1;
  this.wireframeLinecap = 'round';
  this.wireframeLinejoin = 'round';

  this.skinning = false;
  this.morphTargets = false;

  this.lights = false;

  this.setValues( parameters );

}

网格

function Mesh( geometry, material ) {

  Object3D.call( this );

  this.type = 'Mesh';

  this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
  this.material = material !== undefined ? material : new MeshBasicMaterial( { color: Math.random() * 0xffffff } );

  this.drawMode = TrianglesDrawMode;

  this.updateMorphTargets();

}

物品渲染在场景上

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

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

// 渲染
const renderer = new THREE.WebGLRenderer();
// 设置渲染场景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染加到body
document.body.appendChild(renderer.domElement);

// 创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1, 2,2,3);
const material = new THREE.MeshBasicMaterial({color: '#30b2f4'});
const cube = new THREE.Mesh(geometry, material);

// 场景中添加物体
scene.add(cube);

// 设置相机位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = 1;

// 渲染
renderer.render(scene, camera);

浅加一个动画

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

window.requestAnimationFrame(callback);

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

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

// 渲染
const renderer = new THREE.WebGLRenderer();
// 设置渲染场景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染加到body
document.body.appendChild(renderer.domElement);

// 创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 3);
const material = new THREE.MeshBasicMaterial({ color: '#30b2f4' });
const cube = new THREE.Mesh(geometry, material);

// 场景中添加物体
scene.add(cube);

// 设置相机位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = 1;




// 添加动画效果
function animation() {
  window.requestAnimationFrame(animation);
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  camera.position.z += 0.01
  camera.position.y += 0.01

  // 渲染
  renderer.render(scene, camera);
}

animation()

添加曲线

参数解析

  • points – Vector3点数组
  • closed – 该曲线是否闭合，默认值为false。
  • curveType – 曲线的类型，默认值为centripetal。
  • tension – 曲线的张力，默认为0.5。
function CatmullRomCurve3( points, closed, curveType, tension ) {

  Curve.call( this );

  this.type = 'CatmullRomCurve3';

  this.points = points || [];
  this.closed = closed || false;
  this.curveType = curveType || 'centripetal';
  this.tension = tension || 0.5;

}

function Vector3( x, y, z ) {

  this.x = x || 0;
  this.y = y || 0;
  this.z = z || 0;

}

function BufferGeometry() {

  Object.defineProperty( this, 'id', { value: bufferGeometryId += 2 } );

  this.uuid = _Math.generateUUID();

  this.name = '';
  this.type = 'BufferGeometry';

  this.index = null;
  this.attributes = {};

  this.morphAttributes = {};

  this.groups = [];

  this.boundingBox = null;
  this.boundingSphere = null;

  this.drawRange = { start: 0, count: Infinity };

}

function LineBasicMaterial( parameters ) {

  Material.call( this );

  this.type = 'LineBasicMaterial';

  this.color = new Color( 0xffffff );

  this.linewidth = 1;
  this.linecap = 'round';
  this.linejoin = 'round';

  this.lights = false;

  this.setValues( parameters );

}

function Line( geometry, material, mode ) {

  if ( mode === 1 ) {

    console.warn( 'THREE.Line: parameter THREE.LinePieces no longer supported. Created THREE.LineSegments instead.' );
    return new LineSegments( geometry, material );

  }

  Object3D.call( this );

  this.type = 'Line';

  this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
  this.material = material !== undefined ? material : new LineBasicMaterial( { color: Math.random() * 0xffffff } );

}

//Create a closed wavey loop
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 10),
  new THREE.Vector3(-5, 5, 5),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 5),
  new THREE.Vector3(10, 0, 10)
]);

const points = curve.getPoints(50);
const geometryCurve = new THREE.BufferGeometry().setFromPoints(points);
const materialCurve = new THREE.LineBasicMaterial({ color: 0xff0000 });

// Create the final object to add to the scene
const curveObject = new THREE.Line(geometryCurve, materialCurve);


// 场景中添加物体
scene.add(curveObject);

添加灯光

function AmbientLight( color, intensity ) {

  Light.call( this, color, intensity );

  this.type = 'AmbientLight';

  this.castShadow = undefined;

}

动画执行一段时间，移除物体


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

// 创建相机
const camera = new THREE.PerspectiveCamera(76, window.innerWidth / window.innerHeight, 1, 1000);

// 渲染
const renderer = new THREE.WebGLRenderer();
// 设置渲染场景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染加到body
document.body.appendChild(renderer.domElement);

// 创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 3);
const material = new THREE.MeshBasicMaterial({ color: '#30b2f4' });
const cube = new THREE.Mesh(geometry, material);

//Create a closed wavey loop
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 10),
  new THREE.Vector3(-5, 5, 5),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 5),
  new THREE.Vector3(10, 0, 10)
]);

const points = curve.getPoints(50);
const geometryCurve = new THREE.BufferGeometry().setFromPoints(points);
const materialCurve = new THREE.LineBasicMaterial({ color: 0xff0000 });

// Create the final object to add to the scene
const curveObject = new THREE.Line(geometryCurve, materialCurve);

// 添加灯光
const light = new THREE.AmbientLight('#52D59A'); // soft white light

// 场景中添加物体
scene.add(light);

scene.add(cube);
scene.add(curveObject);

// 设置相机位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = -2;


let count = 0
// 添加动画效果
function animation() {

  if (count !== 110) {
    window.requestAnimationFrame(animation);
    renderer.render(scene, camera);

  }
  if (count >= 100) {
    scene.remove(cube)
  }

  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  camera.position.z += 0.01
  camera.position.y += 0.01
  count++;

  console.log('count', count);
  // 渲染
}

animation()


function Object3D() {

  Object.defineProperty( this, 'id', { value: object3DId ++ } );

  this.uuid = _Math.generateUUID();

  this.name = '';
  this.type = 'Object3D';

  this.parent = null;
  this.children = [];

  this.up = Object3D.DefaultUp.clone();

  var position = new Vector3();
  var rotation = new Euler();
  var quaternion = new Quaternion();
  var scale = new Vector3( 1, 1, 1 );
  function onRotationChange() {

    quaternion.setFromEuler( rotation, false );

  }

  function onQuaternionChange() {

    rotation.setFromQuaternion( quaternion, undefined, false );

  }

  rotation.onChange( onRotationChange );
  quaternion.onChange( onQuaternionChange );

  Object.defineProperties( this, {
    position: {
      enumerable: true,
      value: position
    },
    rotation: {
      enumerable: true,
      value: rotation
    },
    quaternion: {
      enumerable: true,
      value: quaternion
    },
    scale: {
      enumerable: true,
      value: scale
    },
    modelViewMatrix: {
      value: new Matrix4()
    },
    normalMatrix: {
      value: new Matrix3()
    }
  } );

  this.matrix = new Matrix4();
  this.matrixWorld = new Matrix4();

  this.matrixAutoUpdate = Object3D.DefaultMatrixAutoUpdate;
  this.matrixWorldNeedsUpdate = false;

  this.layers = new Layers();
  this.visible = true;

  this.castShadow = false;
  this.receiveShadow = false;

  this.frustumCulled = true;
  this.renderOrder = 0;

  this.userData = {};
  }

修改渲染的背景颜色

// 渲染
const renderer = new THREE.WebGLRenderer();

// 更改渲染背景色，默认为黑色
renderer.setClearColor('rgba(191, 115, 87, 0.95)', 1.0)

渲染3D文本

在官网可随意下载一个字体json文件放置本地使用
地址：https://github.com/mrdoob/three.js/tree/dev/examples/fonts
在这里插入图片描述

// 创建场景
const scene = new THREE.Scene();
const loader = new THREE.FontLoader();
loader.load('./gentilis_regular.json', function (font) {
  const geometryText = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 0.3,
    height: 0.1,
    // curveSegments: 12,//表示文本的）曲线上点的数量。默认值为12。
    // bevelEnabled: true,//是否开启斜角
    // bevelThickness: 10,//文本上斜角的深度，默认值为20。
    // bevelSize: 8,//斜角与原始文本轮廓之间的延伸距离。默认值为8。
    // bevelSegments: 5//斜角的分段数。默认值为3。
  });
  const m = new THREE.MeshBasicMaterial({color:'#ffffff'});
  const  mesh = new THREE.Mesh(geometryText,m);
  scene.add(mesh)
});

在这里插入图片描述

GitHub：https://github.com/mrdoob/three.js/blob/master/src/scenes/Scene.js

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/53847.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[附源码]Python计算机毕业设计Django基于web的建设科技项目申报管理系统

[附源码]Python计算机毕业设计Django基于web的建设科技项目申报管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
【内网安全】——Linux信息收集

【内网安全】——Linux信息收集

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门 创作初心&#xff1a;舞台再大&#xff0c;你不上台&#xff0c;永远是观众&#xff0c;没人会关心你努不努力&#xff0c;摔的痛不痛&#xff0c;他们只会看你最后站在什么位置&#xff0c;然后羡慕或鄙夷座…
阅读更多...
ContentResolver.query流程分析

ContentResolver.query流程分析

文章目录1.Context.getContentResolver()2.ContentResolver.query()3.ContentProviderProxy.query()4.Transport.query()总结增删改查ContentProvider时&#xff0c;通过Binder实现ContentProvider在App进程启动时进行实例化&#xff0c;具体时机是在Application.onCreate()执行…
阅读更多...
项目构建生命周期与插件

项目构建生命周期与插件

项目构建生命周期描述的是一次构建过程经历了多少个事件。 maven对项目构建的生命周期划分为3套&#xff1a; clean&#xff1a;清理工作。 default&#xff1a;核心工作&#xff0c;例如编译、测试、打包、部署等。 site&#xff1a;产生报告&#xff0c;发布站点等。 clean生…
阅读更多...
工具-Obsidian生产力工具，安装第三方插件（GitHub）教程，以安装Syntax Highlight（代码高亮）为例

工具-Obsidian生产力工具，安装第三方插件（GitHub）教程，以安装Syntax Highlight（代码高亮）为例

文章目录1、去GitHub上找到你需要的插件2、下载到本地3、在obsidian中新建文件4、将下载好的GitHub文件放置文件夹5、obsidian中设置6、插入代码块实例1、去GitHub上找到你需要的插件 在GitHub的搜索框中&#xff0c;直接搜索obsidian 插件名&#xff0c;obsidianSyntax Highl…
阅读更多...
Halcon 图片分割 米粒分水岭（高斯滤波，区域距离计算，分水岭处理）

Halcon 图片分割 米粒分水岭（高斯滤波，区域距离计算，分水岭处理）

资源&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1kmxdMk67E-7QCsG5mKnc7A 提取码&#xff1a;555s 图片 代码 * 1.读取并显示图片 ************************************* dev_close_window () read_image (Image, ./img.png) get_image_size (Image, Width, He…
阅读更多...
JVM垃圾回收

JVM垃圾回收

JVM 快速开始&#xff1a; 请谈谈你对JVM 的理解&#xff1f;java8 的虚拟机有什么更新&#xff1f; 什么是OOM &#xff1f;什么是StackOverflowError&#xff1f;有哪些方法分析&#xff1f; JVM 的常用参数调优你知道哪些&#xff1f; 内存快照抓取和MAT分析DUMP文件知道…
阅读更多...
Android databinding的接入使用与详解(一)

Android databinding的接入使用与详解(一)

一、介绍 DataBinding 是Google Android组件框架&#xff0c;管理view和data之间进行绑定。DataBinding主要管理数个布局文件&#xff0c;这样我们就不用去实例化layout的view。直接通过DataBindingUitl来完成初始化。 这样可以精简代码&#xff0c;也减少工作量&#xff0c;避…
阅读更多...
2022双十二有哪些值得入手的数码好物？值得入手的数码好物推荐

2022双十二有哪些值得入手的数码好物？值得入手的数码好物推荐

双十二快到了&#xff0c;不少人都会选择在这个时候入手数码产品&#xff0c;但又不知道有哪些值得入手。下面&#xff0c;我来给大家推荐几款实用性高&#xff0c;入手性强的数码好物&#xff0c;感兴趣的一起来看看吧。 一、南卡小音舱蓝牙耳机 推荐理由&#xff1a;蓝牙5.…
阅读更多...
带你初识JSP（JAVA服务器页面）

带你初识JSP（JAVA服务器页面）

文章目录前言第一个 JSP 程序什么是Java Server Pages?为什么使用JSP&#xff1f;JSP的优势配置Java开发工具&#xff08;JDK&#xff09;设置Web服务器&#xff1a;Tomcat设置 CLASSPATH 环境变量JSP 结构JSP 处理JSP 生命周期JSP编译JSP初始化JSP执行JSP清理前言 JSP 与 PH…
阅读更多...
ABAP CLEAR REFRESH FREE 说明（刘欣）

ABAP CLEAR REFRESH FREE 说明（刘欣）

本文仔细测试总结了ABAP中的clear、refresh、free&#xff0c;因为很多时候程序的BUG就是出现在变量没有清理干净&#xff0c;希望整理一个定式出来以后少出BUG。 用clear、refresh、free对带表头的表执行的测试结果如下表&#xff1a; 看起来&#xff0c;最好的避免这些清空命…
阅读更多...
Oracle11g安装

Oracle11g安装

参考教程 Oracle11g安装配置详细教程 oracle11g安装步骤详细图文教程 但是这里的用户名如果是以system的话&#xff0c;密码错误 Oracle默认账号密码&#xff1a; &#xff08;1&#xff09;普通用户&#xff1a; SCOTT &#xff08;密码&#xff1a;tiger&#xff09; &…
阅读更多...
Day17--购物车页面-商品列表-封装NumberBox

Day17--购物车页面-商品列表-封装NumberBox

提纲挈领&#xff1a; 官方文档提供了uni-number-box组件 文档内容&#xff1a; 我的操作&#xff1a; 1》修改 my-goods.vue 组件的源代码&#xff0c;在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构&#xff1a; 2》美化其样式 *****************…
阅读更多...
基于最小均方误差linear minimum mean square error(LMMSE)插值算法的图像超分辨重构研究-附Matlab代码

基于最小均方误差linear minimum mean square error(LMMSE)插值算法的图像超分辨重构研究-附Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、引言✳️ 二、图像复原基本原理✳️ 三、基于多通道LMMSE图像复原法✳️ 3.1 最小均方误差LMMSE插值理论✳️ 3.2 理论公式对应的Matlab关键代码✳️ 四、实验验证✳️ 五、参考文献✳️ 六、Matlab程序获取与验证✳️ 一、引言 图像是一种表达信息的…
阅读更多...
进程与线程的相爱相杀

进程与线程的相爱相杀

✨✨hello&#xff0c;愿意点进来的小伙伴们&#xff0c;你们好呐&#xff01; &#x1f43b;&#x1f43b;系列专栏&#xff1a;【JavaEE初阶】 &#x1f432;&#x1f432;本篇内容&#xff1a;详解进程与线程 &#x1f42f;&#x1f42f;作者简介:一名现大二的三非编程小白&…
阅读更多...
Linux文件系统

Linux文件系统

Linux文件系统 文章目录Linux文件系统1.对文件系统的理解1.1 文件系统当中的缓冲区1.2 文件系统当中的inode1.3 文件属性与文件数据分开存放原理2.对软硬链接的理解扩展&#xff1a;对文件三时间的理解1.对文件系统的理解 1.1 文件系统当中的缓冲区 我们来看看下面这段代码&a…
阅读更多...
基于K8s构建Jenkins持续集成平台（部署流程）（转了一点）

基于K8s构建Jenkins持续集成平台（部署流程）（转了一点）

转载至&#xff1a;https://blog.csdn.net/m0_59430185/article/details/123394853 一、传统Jenkins的Master-Slave方案的缺陷 Master节点发生单点故障时&#xff0c;整个流程都不可用了 每个 Slave节点的配置环境不一样&#xff0c;来完成不同语言的编译打包等操作&#xff0…
阅读更多...
【Uni-App】点击分享，生成海报带二维码，保存到本地图片

【Uni-App】点击分享，生成海报带二维码，保存到本地图片

目录一&#xff1a;需求二&#xff1a;分析三&#xff1a;准备工作1.qrcode准备2.并且在main.js去挂载四&#xff1a;页面构建1.html2.data3.js一&#xff1a;需求 1.产品需要这个商品&#xff0c;必须分享才有购买资格 2.一共三点&#xff0c;有海报&#xff0c;有二维码&…
阅读更多...
k8s安装3节点集群Fate v1.8.0

k8s安装3节点集群Fate v1.8.0

集群配置信息 3节点配置信息如下图&#xff1a; 当kubefate最新版是1.9.0时&#xff0c;依赖的k8s和ingress-ngnix版本如下&#xff1a; Recommended version of dependent software: Kubernetes: v1.23.5 Ingress-nginx: v1.1.3 升级K8S到1.23.5 参考博客 https://blog.c…
阅读更多...
HarmonyOS应用API手势方法-SwipeGesture

HarmonyOS应用API手势方法-SwipeGesture

描述&#xff1a;用于触发滑动事件&#xff0c;滑动最小速度为100vp/s时识别成功。 Api&#xff1a;从API Version 8开始支持 接口&#xff1a;SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) 参数&#xff1a; SwipeDirecti…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023