<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Three.js Scene</title>
<script src="https://threejs.org/build/three.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<!-- 用于渲染场景的容器 -->
<div id="canvas"></div>
<script>
// JavaScript代码将在这里添加
// 声明全局变量
var scene, camera, renderer, controls;
// 初始化Three.js场景
function init() {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(1500, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("canvas").appendChild(renderer.domElement);
// 创建控制器
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 添加灯光
var ambientLight = new THREE.AmbientLight('#4649ed', 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight('#ede137', 0.8);
directionalLight.position.set(1, 1, 0);
scene.add(directionalLight);
// 创建机器人模型
var geometry = new THREE.BoxGeometry(2, 2, 2);
var material = new THREE.MeshPhongMaterial({ color: '#53eded' });
var robot = new THREE.Mesh(geometry, material);
scene.add(robot);
// 循环渲染场景
animate();
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
// 窗口大小改变时重新设置渲染器尺寸
window.addEventListener("resize", function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// 初始化场景
init();
</script>
</body>
</html>
延伸：如何引入外部的3d文件：
1.如何免费下载和安装Blender
下载和安装Blender是免费的，你可以按照以下步骤在计算机上获取和安装Blender：
访问Blender官方网站：https://www.blender.org。
点击网站首页上的"Download"（下载）按钮，你将被重定向到下载页面。
下载完成后自己随便做个3D模型。
在下载页面，你将看到不同的版本和操作系统的选项。根据你的操作系统，选择适当的版本进行下载。Blender支持Windows、macOS和Linux等操作系统。
2.如何绘制3D
生成外部3D模型文件通常需要使用专业的3D建模软件，如Blender、3ds Max、Maya等。以下是一个简单的步骤示例，演示如何使用Blender创建一个简单的3D模型并导出为OBJ格式文件：
打开Blender并创建一个新的项目。
使用Blender的建模工具（如顶点、边缘、面等）来创建你想要的3D模型。你可以使用不同的建模技术，如基础几何体、细分曲面、多边形建模等。
在建模过程中，你可以应用纹理、材质、光照等效果来增强模型的外观。
完成建模后，确保你的模型已经被正确地放置在场景中，并且你已经设置好了相机和灯光。
导出模型为OBJ文件。在Blender中，选择菜单中的 "File" -> "Export" -> "Wavefront (.obj)"。在弹出的对话框中，选择保存的路径和文件名，并设置导出选项。确保选择了 "Selection Only" 选项，以仅导出所选的模型。然后点击 "Export OBJ" 完成导出。
现在你已经成功生成了一个外部的OBJ格式的3D模型文件，可以在其他应用程序或Three.js中加载和使用它。
如图以上：就已经保存为一个obj格式的3d文件，保存到项目中
确保在引入Three.js库之后，也正确引入了OBJLoader库,因为在较新的版本的Three.js中，OBJLoader已经不再作为Three.js的核心组件，而是作为一个独立的模块。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js OBJLoader Demo</title>
<style>
canvas {
width: 100%;
height: 100%;
/* height: 200px; */
display: block;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.1/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="canvas"></div>
<script>
// 声明全局变量
var scene, camera, renderer, controls;
// 初始化Three.js场景
function init() {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 40; //位置
// 创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("canvas").appendChild(renderer.domElement);
// 创建控制器
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 添加灯光
var ambientLight = new THREE.AmbientLight('#4649ed', 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight('#ede137', 0.8);
directionalLight.position.set(1, 1, 0);
scene.add(directionalLight);
// 引入外部模型
var loader = new THREE.OBJLoader();
loader.load(
'img/3d.obj',
function(object) {
scene.add(object);
}
);
// 循环渲染场景
animate();
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
// 窗口大小改变时重新设置渲染器尺寸
window.addEventListener("resize", function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// 初始化场景
init();
</script>
</body>
</html>
代码加了颜色配置，所以颜色改变了
》
《延伸》--------------------------------------------------------------------------------------------
在使用Three.js进行3D图形开发时，开发者可能会遇到各种挑战和问题。以下是一些常见的“坑”以及如何避免或解决这些问题的方法：
-
性能问题：
- 问题：复杂的场景、大量的几何体或者高分辨率的纹理可能导致渲染性能下降。
- 解决方案：优化模型（减少多边形数量）、使用LOD（Level of Detail）技术、压缩纹理大小、合理利用缓存机制等。
-
跨浏览器兼容性：
- 问题：不同的浏览器对WebGL的支持程度不同，可能会导致某些功能在某些浏览器上无法正常工作。
- 解决方案：测试你的应用在多种浏览器上的表现，确保代码兼容性。可以使用
THREE.WebGLRenderer的webgl2参数来尝试使用WebGL 2.0，如果不可用则回退到WebGL 1.0。
-
内存管理：
- 问题：长时间运行的应用程序可能会因为内存泄漏而变得缓慢甚至崩溃。
- 解决方案：定期检查并清理不再使用的资源，如纹理、几何体和材质。使用
dispose()方法来释放这些资源。
-
光照和阴影：
- 问题：设置合适的光照和阴影效果可能比较复杂，特别是在模拟真实世界的效果时。
- 解决方案：熟悉Three.js提供的不同类型的光源（点光源、平行光、环境光等），并了解如何调整它们的属性以获得所需的效果。对于阴影，确保启用了阴影投射和接收，并适当调整阴影质量以平衡性能与视觉效果。
-
动画和交互：
- 问题：实现流畅的动画和响应灵敏的用户交互可能需要一些技巧。
- 解决方案：使用
requestAnimationFrame来创建平滑的动画循环。对于交互，可以利用Three.js提供的控制器如OrbitControls或自定义事件监听器来处理用户的输入。
-
加载外部资源：
- 问题：加载外部文件（如模型、纹理）可能会因网络延迟或文件格式问题而失败。
- 解决方案：为加载过程添加错误处理逻辑，并考虑提供默认资源或占位符。使用支持广泛格式的加载器，并确保文件路径正确无误。
-
调试困难：
- 问题：由于Three.js涉及大量可视化内容，传统的JavaScript调试工具可能不够直观。
- 解决方案：利用Three.js自带的帮助函数，比如
THREE.Object3D的traverse方法来遍历场景中的对象。还可以使用像dat.GUI这样的库来动态调整场景参数，帮助理解不同设置的影响。
-
移动设备适配：
- 问题：在移动设备上运行Three.js应用时，可能会遇到触摸事件处理不当或性能不佳的问题。
- 解决方案：针对触摸事件编写专门的处理逻辑，例如使用
touchstart、touchmove和touchend事件。同时，简化场景以适应移动设备较低的GPU性能。
-
文档不足：
- 问题：尽管Three.js有官方文档，但有时它可能不够详细或更新滞后。
- 解决方案：查看社区论坛、Stack Overflow等地方寻找解决方案。阅读源码也是一个很好的学习途径。
通过提前了解这些问题并采取相应的预防措施，你可以更有效地使用Three.js构建高质量的3D应用程序。
扫一扫
2616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
