【threejs】每天一个小案例讲解：创建基本的3D场景

代码仓

GitHub - TiffanyHoo/three_practices: Learning three.js together!

可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件

运行效果图

知识要点

核心运行代码

<!DOCTYPE html><html><head><title>Example 03.02 - point Light</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head><body><div id="Stats-output"></div><!-- Div which will hold the Output --><div id="WebGL-output"></div><!-- Javascript code that runs our Three.js examples --><script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {// create a scene, that will hold all our elements such as objects, cameras and lights.var scene = new THREE.Scene();// create a camera, which defines where we're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the sizevar renderer = new THREE.WebGLRenderer();// var renderer = new THREE.WebGLRenderer({alpha: true});/*** alpha: true 启用透明度支持* !!!透明度没有生效* 1.因为没有启用渲染器透明度支持* 2.没有正确使用setClearColor方法两个参数*   renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));*   透明度 （0-1） 0 完全透明 1完全不透明**/renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);// renderer.shadowMapEnabled = true;// 启用阴影贴图：用于在3D场景中生成和渲染物体的阴影// create the ground planevar planeGeometry = new THREE.PlaneGeometry(60, 20, 20, 20);var planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true; // 接收阴影// rotate and position the planeplane.rotation.x = -0.5 * Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// add the plane to the scenescene.add(plane);// create a cubevar cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff7777 });// MeshLambertMaterial 基于Lambert反射模型的材质，适用于不发光且没有高光的物体（表面粗糙、没有明显反光）。它支持颜色、贴图、透明度等属性。var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true; // 投射阴影// position the cubecube.position.x = -4;cube.position.y = 3;cube.position.z = 0;// add the cube to the scenescene.add(cube);var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// position the spheresphere.position.x = 20;sphere.position.y = 0;sphere.position.z = 2;sphere.castShadow = true;// add the sphere to the scenescene.add(sphere);// position and point the camera to the center of the scenecamera.position.x = -25;camera.position.y = 30;camera.position.z = 25;camera.lookAt(new THREE.Vector3(10, 0, 0));// 添加光源// add subtle ambient lightingvar ambiColor = "#0c0c0c";var ambientLight = new THREE.AmbientLight(ambiColor);scene.add(ambientLight);// add spotlight for the shadowsvar spotLight = new THREE.SpotLight(0xffffff);console.log(spotLight.position);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;console.log(spotLight);console.log(spotLight.target); // 默认（0,0,0）console.log(spotLight.shadow); // undefined shadow属性是在r128之后引入的// scene.add( spotLight );var pointColor = "#ccffcc";var pointLight = new THREE.PointLight(pointColor); // 无阴影pointLight.distance = 100; // 0 无限远 光线强度不随距离增加而减弱scene.add(pointLight);// add a small sphere simulating the pointlightvar sphereLight = new THREE.SphereGeometry(0.2);var sphereLightMaterial = new THREE.MeshBasicMaterial({ color: 0xac6c25 });var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);sphereLightMesh.castShadow = true;sphereLightMesh.position = new THREE.Vector3(3, 0, 3);scene.add(sphereLightMesh);// const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// directionalLight.position.set(-40, 60, -10);// directionalLight.castShadow = true;// scene.add(directionalLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(renderer.domElement);// call the render functionvar step = 0;// used to determine the switch point for the light animationvar invert = 1;var phase = 0;var controls = new function () {this.rotationSpeed = 0.03;this.bouncingSpeed = 0.03;this.ambientColor = ambiColor;this.pointColor = pointColor;this.intensity = 1;this.distance = 100;};var gui = new dat.GUI();gui.addColor(controls, 'ambientColor').onChange(function (e) {ambientLight.color = new THREE.Color(e);});gui.addColor(controls, 'pointColor').onChange(function (e) {pointLight.color = new THREE.Color(e);});gui.add(controls, 'intensity', 0, 3).onChange(function (e) {pointLight.intensity = e;});gui.add(controls, 'distance', 0, 100).onChange(function (e) {pointLight.distance = e;});var stats = initStats();render();function render() {stats.update();// rotate the cube around its axescube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// bounce the sphere up and downstep += controls.bouncingSpeed;sphere.position.x = 20 + (10 * (Math.cos(step)));sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));// move the light simulationif (phase > 2 * Math.PI) {invert = invert * -1;phase -= 2 * Math.PI;} else {phase += controls.rotationSpeed;}sphereLightMesh.position.z = +(7 * (Math.sin(phase)));sphereLightMesh.position.x = +(14 * (Math.cos(phase)));sphereLightMesh.position.y = 5;if (invert < 0) {var pivot = 14;sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;}pointLight.position.copy(sphereLightMesh.position);// render using requestAnimationFramerequestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init</script>
</body></html>

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

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

相关文章

微软PowerBI考试 PL300-使用 Power BI 准备数据以供分析【提供练习数据】

微软PowerBI考试 PL300-使用 Power BI 准备数据以供分析【提供练习数据】

微软PowerBI考试 PL300-使用 Power BI 准备数据以供分析 您将了解如何使用 Power Query 从不同的数据源中提取数据&#xff0c;选择存储模式和连接性类型。 您还将了解在对数据进行建模之前&#xff0c;如何分析、清理数据以及将数据加载到 Power BI 中。 在 Power BI 中获取…
阅读更多...
Linux与Windows切换使用Obsidian，出现 unexplained changes 问题的解决

Linux与Windows切换使用Obsidian，出现 unexplained changes 问题的解决

如果你的Obsidian文档在Linux与Windows间来回切换&#xff0c;可能会涉及到文件的保存换行符问题&#xff0c;但这样的话就容易导致一个问题&#xff0c;那就是内容无差异&#xff0c;Obsidian却提示unexplained changes&#xff0c;Windows系统下的解决方法如下&#xff0c;找…
阅读更多...
Python爬虫-爬取各省份各年份高考分数线数据，进行数据分析

Python爬虫-爬取各省份各年份高考分数线数据，进行数据分析

前言 本文是该专栏的第60篇，后面会持续分享python爬虫干货知识，记得关注。 本文，笔者将基于Python爬虫，爬取各省份历年以来的“各年份高考分数线”进行数据分析。 废话不多说，具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。接下来，跟着笔者直接往下看…
阅读更多...
基于cornerstone3D的dicom影像浏览器 第三十章 心胸比例测量工具CTRTool

基于cornerstone3D的dicom影像浏览器 第三十章 心胸比例测量工具CTRTool

文章目录 前言一、实现过程1. 学习CobbAngleTool源码2. 新建CTRTool.js文件3. 重写constructor函数4. 重写defaultGetTextLines函数5. 增加_calculateLength函数6. 重写_calculateCachedStats函数7. 重写renderAnnotation函数 二、使用步骤1.引入库2. 添加到cornerstoneTools3.…
阅读更多...
[嵌入式AI从0开始到入土]18_Ascend C算子开发环境（S5赛季）

[嵌入式AI从0开始到入土]18_Ascend C算子开发环境（S5赛季）

[嵌入式AI从0开始到入土]嵌入式AI系列教程 注&#xff1a;等我摸完鱼再把链接补上 可以关注我的B站号工具人呵呵的个人空间&#xff0c;后期会考虑出视频教程&#xff0c;务必催更&#xff0c;以防我变身鸽王。 第1期 昇腾Altas 200 DK上手 第2期 下载昇腾案例并运行 第3期 官…
阅读更多...
《前端面试题：JavaScript 闭包深度解析》

《前端面试题：JavaScript 闭包深度解析》

JavaScript 闭包深度解析&#xff1a;从原理到高级应用 一、闭包的本质与核心概念 闭包&#xff08;Closure&#xff09;是 JavaScript 中最强大且最常被误解的概念之一。理解闭包不仅是掌握 JavaScript 的关键&#xff0c;也是区分初级和高级开发者的重要标志。 1. 什么是闭…
阅读更多...
【FPGA开发】DDS信号发生器设计

【FPGA开发】DDS信号发生器设计

一、常见IP模块介绍 IP(IntellectualProperty)原指知识产权、著作权等&#xff0c;在IC设计领域通常被理解为实现某种功能的设计。IP模块则是完成某种比较复杂算法或功能&#xff08;如FIR滤波器、FFT、SDRAM控制器、PCIe接口、CPU核等&#xff09;并且参数可修改的电路模块&a…
阅读更多...
板凳-------Mysql cookbook学习 （九--3）

板凳-------Mysql cookbook学习 （九--3）

4.3 使用临时表 Drop table 语句来删除表&#xff0c; 选择使用create temporary table 语句&#xff0c;创建的是一张临时表。 Create temporary table tb1_name(…列定义…) 克隆表 Create temporary table new_table like original_table 根据查询结果建表 Create temporary…
阅读更多...
Python Web项目打包（Wheel）与服务器部署全流程

Python Web项目打包（Wheel）与服务器部署全流程

目录 一、本地开发环境准备二、创建setup.py打包配置三、创建WSGI入口文件四、打包生成Wheel文件五、服务器端部署流程1. 传输文件到服务器2. 服务器环境准备3. 配置生产环境变量4. 使用Gunicorn启动服务 六、高级部署方案&#xff08;Systemd服务&#xff09;1. 创建Systemd服…
阅读更多...
c++ 基于openssl MD5用法

c++ 基于openssl MD5用法

基于openssl MD5用法 #include <iostream> #include <openssl/md5.h> using namespace std; int main(int argc, char* argv[]) { cout << "Test Hash!" << endl; unsigned char data[] "测试md5数据"; unsigned char out[1024…
阅读更多...
如何通过外网访问内网服务器？怎么让互联网上连接本地局域网的网址

如何通过外网访问内网服务器？怎么让互联网上连接本地局域网的网址

服务器作为一个数据终端&#xff0c;是很多企事业单位不可获缺的重要设备&#xff0c;多数公司本地都会有部署服务器供测试或部署一些网络项目使用。有人说服务器就是计算机&#xff0c;其实这种说法不是很准确。准确的说服务器算是计算机的一种&#xff0c;它的作用是管理计算…
阅读更多...
安装Openstack

安装Openstack

基本按照Ubuntu官网的指南来安装&#xff0c;使用单节点模式&#xff0c;官网步骤参见网址&#xff1a;https://ubuntu.com/openstack/install 系统为Ubuntu 24.04.2&#xff0c;全新安装. Welcome to Ubuntu 24.04.2 LTS (GNU/Linux 6.11.0-24-generic x86_64)kaiexperiment…
阅读更多...
‌Kafka与RabbitMQ的核心区别

‌Kafka与RabbitMQ的核心区别

‌1.设计目标与适用场景‌ ‌Kafka‌&#xff1a;专注于高吞吐量的分布式流处理平台&#xff0c;适合处理大数据流&#xff08;如日志收集、实时数据分析&#xff09;&#xff0c;强调消息的顺序性和扩展性。‌‌ ‌RabbitMQ‌&#xff1a;作为消息中间件&#xff0c;侧重于消…
阅读更多...
深入理解 Spring Cache 及其核心注解

深入理解 Spring Cache 及其核心注解

一、Spring Cache 概述​ Spring Cache 并不是一个具体的缓存实现方案&#xff0c;而是一套抽象的缓存规范。它支持多种缓存技术&#xff0c;如 Ehcache、Redis、Caffeine 等&#xff0c;开发者可以根据项目需求灵活选择合适的缓存技术。其核心思想是通过在方法上添加注解&…
阅读更多...
STM32H562----------串口通信(UART)

STM32H562----------串口通信(UART)

1、串口介绍 1.1、 数据通信概念 在单片机中我们常用的通信方式有 USART、IIC、SPI、CAN、USB 等； 1、数据通信方式 根据数据通信方式可分为串行通信和并行通信两种，如下图： 串行通信基本特征是数据逐位顺序依次传输，优点：传输线少成本低，抗干扰能力强可用于远距离传…
阅读更多...
20-Oracle 23 ai free Database Sharding-特性验证

20-Oracle 23 ai free Database Sharding-特性验证

对于Oracle 23ai Sharding 新特性的验证脚本&#xff0c;目标是涵盖其核心改进和新增功能。基于 Oracle 23ai 的 Sharding 特性总结&#xff08;Raft 协议、True Cache、Vector等&#xff09;&#xff0c;结合常见场景验证。 通过SQL脚本验证这些特性。例如&#xff1a; 1.基于…
阅读更多...
✅ 常用 Java HTTP 客户端汇总及使用示例

✅ 常用 Java HTTP 客户端汇总及使用示例

在 Java 开发中，HTTP 客户端是与服务端交互的关键组件。随着技术发展，出现了多种 HTTP 客户端库，本文汇总了常用的 Java HTTP 客户端，介绍其特点、适用场景，并附上简单使用示例，方便开发者快速选择和上手。 1.常用 HTTP 客户端一览 名称简介特点HttpClient（JDK 自带）Ja…
阅读更多...
MCP（Model Context Protocol）与提示词撰写

MCP（Model Context Protocol）与提示词撰写

随着大模型&#xff08;LLM&#xff09;在复杂任务中的普及&#xff0c;如何让模型高效调用外部工具和数据成为关键挑战。传统函数调用&#xff08;Function Calling&#xff09;依赖开发者手动封装 API&#xff0c;而 MCP&#xff08;Model Context Protocol&#xff09; 通过…
阅读更多...
RootSIFT的目标定位，opencvsharp。

RootSIFT的目标定位，opencvsharp。

首先截取匹配模板&#xff0c;然后使用rootsift特征匹配&#xff0c;最后定位目标。 对于微弱变化&#xff0c;还是能够识别定位的&#xff0c;对于传统算法来说已经不错了。 目标定位效果&#xff1a; 使用的模板图片。 using OpenCvSharp; using OpenCvSharp.Features2D;u…
阅读更多...
Appium如何支持ios真机测试

Appium如何支持ios真机测试

ios模拟器上UI自动化测试 以appiumwebdriverio为例&#xff0c;详细介绍如何在模拟器上安装和测试app。在使用ios模拟器前&#xff0c;需要安装xcode&#xff0c;创建和启动一个simulator。simulator创建好后&#xff0c;就可以使用xcrun simctl命令安装被测应用并开始测试了。…
阅读更多...
最新文章

Copyright @ 2022~2023