首页 > 其他分享 >52. Three.js案例-创建实心和空心立方体

52. Three.js案例-创建实心和空心立方体

时间:2025-01-03 09:27:08浏览次数:8  
标签:场景 创建 THREE js 立方体 Three var new 52

52. Three.js案例-创建实心和空心立方体

实现效果

在本案例中,我们使用Three.js创建了一个包含实心和空心立方体的3D场景。具体效果为:一个实心立方体位于左侧,而一个带有绿色边框的空心立方体位于右侧。整个场景采用了环境光照明,背景颜色设置为白色。
效果

知识点

WebGLRenderer 渲染器

THREE.WebGLRenderer用于创建WebGL渲染器对象,它负责将3D场景绘制到浏览器画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数类型描述
parametersObject包含渲染器属性的对象。

常用参数:

  • antialias: 布尔值,默认为false。如果设置为true,则启用抗锯齿功能。
  • alpha: 布尔值,默认为false。如果设置为true,则允许透明背景。
方法
  • setSize(width, height): 设置渲染器输出的宽度和高度。
  • setClearColor(color, alpha): 设置渲染器清除颜色(即背景色)及透明度。

PerspectiveCamera 透视相机

THREE.PerspectiveCamera用于创建透视投影相机,模拟人眼观察世界的方式。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数类型描述
fovNumber视野角度,以度为单位。
aspectNumber宽高比,通常为canvas宽除以高。
nearNumber近裁剪面距离。
farNumber远裁剪面距离。
方法
  • position.set(x, y, z): 设置相机位置坐标。
  • lookAt(vector): 让相机看向指定位置。

Scene 场景

THREE.Scene用于创建场景对象,作为所有物体、光源等元素的容器。

方法
  • add(object): 向场景添加对象,如几何体、光源等。

AmbientLight 环境光

THREE.AmbientLight用于创建环境光源,对场景中的所有物体均匀照亮。

构造器

new THREE.AmbientLight(color, intensity)

参数类型描述
colorColor/Hex/String光源颜色。
intensityNumber强度,默认值为1.0。

BoxGeometry 立方体几何体

THREE.BoxGeometry用于创建立方体或长方体几何体。

构造器

new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

参数类型描述
widthNumber宽度。
heightNumber高度。
depthNumber深度。
widthSegmentsNumber宽方向分段数,默认为1。
heightSegmentsNumber高方向分段数,默认为1。
depthSegmentsNumber深方向分段数,默认为1。

MeshNormalMaterial 材质

THREE.MeshNormalMaterial用于创建基于法线的材质,显示物体表面法线方向的颜色。

属性
  • color: 材料颜色,默认为灰色。
  • wireframe: 是否以线框模式渲染,默认为false。

EdgesHelper 边缘辅助线

THREE.EdgesHelper用于创建边缘线,可以直观地展示物体的轮廓。

构造器

new THREE.EdgesHelper(object, hex)

参数类型描述
objectObject3D要添加边缘线的对象。
hexHex边缘线颜色,默认为黑色。

render() 渲染方法

myRenderer.render(myScene, myCamera)用于执行一次渲染操作,将场景通过相机视角绘制到屏幕上。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $("#myContainer").append(myRenderer.domElement);

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45,
        window.innerWidth / window.innerHeight, 30, 1000);
    myCamera.position.set(-34.34, -40.56, 35.83);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建场景
    var myScene = new THREE.Scene();
    myScene.add(new THREE.AmbientLight('white'));

    // 创建实心立方体
    var myGeometry1 = new THREE.BoxGeometry(6, 6, 6);
    var myMaterial1 = new THREE.MeshNormalMaterial();
    var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
    myMesh1.translateX(-20);
    myScene.add(myMesh1);

    // 创建空心立方体
    var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
    var myMaterial2 = new THREE.MeshNormalMaterial();
    var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);

    // 添加边框线
    var myBorder = new THREE.EdgesHelper(myMesh2, 'darkgreen');
    myMesh2.translateX(10);
    myBorder.translateX(10);
    myScene.add(myBorder);

    // 渲染立方体
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

标签:场景,创建,THREE,js,立方体,Three,var,new,52
From: https://blog.csdn.net/m0_51180924/article/details/144900576

相关文章

  • 51. Three.js案例-创建透明立方体
    51.Three.js案例-创建透明立方体实现效果本案例展示了如何使用Three.js创建两个具有不同透明度的立方体,并将其渲染到网页中。通过调整相机位置和设置场景,用户可以观察到这两个立方体在三维空间中的相对位置和透明效果。知识点WebGLRenderer(WebGL渲染器)WebGLRenderer......
  • 请解译下nodejs中__dirname,__filename属性的作用
    在Node.js中,__dirname和__filename是两个全局变量,它们提供了关于当前执行脚本的目录和文件名的信息。这两个变量在Node.js应用程序中特别有用,尤其是当你需要处理文件路径或构建相对路径时。__dirname:__dirname返回当前执行脚本所在的目录的绝对路径。这是一个字符串......
  • Nodejs中是如何导出模块的?
    在Node.js中,你可以使用module.exports或exports关键字来导出模块,使得其他文件可以通过require关键字来引入和使用这些模块。以下是一些示例:示例1:使用module.exports导出//在一个名为myModule.js的文件中functionmyFunction(){console.log("Hellofrommymodule!");......
  • 在Nodejs中异步I/O的流程是怎样的?
    在Node.js中,异步I/O(输入/输出)的流程涉及几个关键概念,包括事件循环、事件队列、回调函数、Promise、以及async/await。这些机制共同工作,使得Node.js能够以非阻塞的方式处理I/O操作,从而提高应用程序的性能和响应能力。以下是异步I/O在Node.js中的基本流程:事件循环(Eve......
  • (免费源码)计算机毕业设计必学必看 java、python、php、node.js、c#、APP、小程序、大数
     摘 要疫情之下,实体经济面临下行压力。2019年以来,新冠肺炎疫情卷土而来,各地地疫情防控形势严峻,许多中小微企业经营发展屡次遭受打击。面对疫情常态化的社会现实,为纾困中小企业,助力经济复苏,保障社会稳定运行,国家有关部门相继出台一系列政策“组合拳”,加大纾困支持力度,提振......
  • (免费源码)计算机毕业设计必学必看 万套实战教程 java、python、php、node.js、c#、APP
    摘 要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,抗疫物资管理小程序被用户普遍使用,为方便用户能够可以随时进行抗疫物资管理小程序的数据信息管理,特开发了基于PHP南宁......
  • (免费源码)计算机毕业设计必学必看 万套实战教程 java、python、php、node.js、c#、APP
     摘 要随着我国经济迅速发展,人们对医疗管理的需求越来越大,各种医疗管理系统也都在被广泛应用,对于医疗管理的各种软件也是备受用户的喜爱,医疗管理系统被用户普遍使用,为方便用户能够可以随时进行医疗管理系统的数据信息管理,特开发了基于springboot医疗管理系统。医疗管理系......
  • (免费源码)计算机毕业设计必学必看 万套实战教程 java、python、php、node.js、c#、APP
    摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对高校课程实验系统等问题,对面向过程性考核的高校课程实验系统进行研究分析,然后开发设计出面向过......
  • Python----Python爬虫(re、bs4、pyquery、xpath、json的使用)
    一、正则表达式的使用1.1、正则表达式        正则表达式是用来匹配字符串非常强大的工具,在其他编程语言中同样有正则表达式的概念,Python同样不例外,利用了正则表达式,我们想要从返回的页面内容提取出我们想要的内容就易如反掌了1.2、规则1.2.1、定位符字符描述^......
  • JVM实战—8.如何分析jstat统计来定位GC
    大纲1.使用jstat了解线上系统的JVM运行状况2.使用jmap和jhat了解线上系统的对象分布3.如何分析JVM运行状况并合理优化4.使用jstat分析模拟的BI系统JVM运行情况5.使用jstat分析模拟的计算系统JVM运行情况6.问题汇总 1.使用jstat了解线上系统的JVM运行状况(1)JVM的整体运......