Three.js 实现虎年春节3D创意页面
背景 虎年 🐅 春节将至，本文使用 React + Three.js 技术栈，实现趣味 3D 创意页面。本文包含的知识点主要包括：ShadowMaterial、 MeshPhongMaterial 两种基本材质的使用、使用 LoadingManager 展示模型加载进度 ...
原文：Three.js 实现2022冬奥主题3D趣味页面 🐼
声明：本文涉及奥运元素 D模型仅用于个人学习 研究和欣赏，请勿二次修改 非法传播 转载 出版 商用 及进行其他获利行为。 背景 迎冬奥，一起向未来 冬奥会马上就要开始了，本文使用 Three.js React 技术栈，实现冬日和奥运元素，制作了一个充满趣味和纪念意义的冬奥主题 D 页面。本文涉及到的知识点主要包括：TorusGeometry 圆环面 MeshLambertMaterial 非光泽 ...
2022-02-03 09:50 15 9115 推荐指数：
相关推荐
three.js ---- 3d页面开发入门
准备工作 1.运用three.js进行3d开发，其实和页面编程一样，首先需要在html文件中引入three.js。Three.js使用面向对象的方式来构建程序，它包含3个基本对象： 场景（scene）, 相机（camera）, 以及一个渲染器（renderer）。 第一步： 引入 ...
使用three.js实现炫酷的酸性风格3D页面
背景 近期学习了 WebGL 和 Three.js 的一些基础知识，于是想结合最近流行的酸性设计风格，装饰一下个人主页，同时总结一些学到的知识。本文内容主要介绍，通过使用 React + three.js 技术栈，加载 3D模型、添加 3D文字、增加动画、点击交互等，配合样式设计，实现充满 ...
用three.js在网页实现3D模型
首先，下载three.js文件，在threejs官网能下，这里附上地址链接一条https://threejs.org/ 然后，下载解压，会得到three.js-master文件，在build目录找到three.js，这个是three.js的核心功能库。在example/js/loaders目录 ...
three.js实现世界3d地图
概况如下： 1、THREE.Shape绘制世界地图平面地图； 2、THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸，实现3d效果； 效果图如下： 预览地址：three.js实现世界3d地图 初始化场景、相机、渲染器，设置相机位置，初始化 ...
three.js实现3D模型展示
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Three 通过上面的代码 ...
Three.js 实现3D全景侦探小游戏🕵️
背景 你是嘿嘿嘿侦探社实习侦探🕵️，接到上级指派任务，到甄开心小镇🏠调查市民甄不戳👨宝石💎失窃案，根据线人流浪汉老石👨🎤提供的线索，小偷就躲在小镇，快把他找出来，帮甄不戳寻回失窃的宝石吧！ 本文使用 Three.js SphereGeometry 创建 3D 全景图 ...
Three.js实现3D地图实例分享
本文主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。希望能帮助到大家。 前言 本文主要介绍Three.js的开发基础和基本原理，以及如何实现 ...