首页 > TAG信息列表 > three

icode9教你如何使用 Three.js 在 Web 上实现 3D

介绍本文概述了与使用 Three.js 在常规 Web 浏览器中直接在 Web 上制作 3D 图形相关的术语和概念。对于 3D，就像任何主题一样，如果您深入了解所有细节，事情会很快变得复杂。我将尝试做相反的事情，并简单概述您在学习如何在常规 Web 浏览器中制作 3D 时会遇到的所有概念。 什么是 Thre

记录--vue+three,制作iview大波浪特效

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、效果图 具体效果可参考iview官方界面iView - 一套高质量的UI组件库   大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持 npm install --save three 具体可以看 three.js examples (threejs.org)

调试 Three.js 项目变得容易多了

调试 Three.js 项目变得容易多了 Three.js 简介 三.js 是一个 JavaScript 库，允许用户在浏览器中创建和显示 3D 内容。为了构建这个 3D 世界，Three.js 依赖于 WebGL。 WebGL 是一个 JavaScript API，允许开发人员创建三角形，这些三角形组合在一起在您的浏览器中创建 3D 体验。 里卡多

网页3D效果库Three.js初窥

一直想研究下web页面的3D效果，最后选择了一个比较的成熟的框架Three.js下手ThreeJs官网ThreeJs-github;接下来我会陆续翻译 Three.js官网的文档，部分文字和代码为我个人添加。 第一部分：three.js介绍 创建场景 这部分的目标是为Three.js做一个简单的介绍，我们会以创建一个场景，一个旋转

three.js实现简单的3D中国省份立体板块地图

源码资料获取：https://github.com/huangchun0121/3D-example/tree/main/省份立体板块 实现代码： 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国地图</title> <style>

three.js绘制地图（平面、曲面）

加载中国地图json数据 let loader = new THREE.FileLoader(); loader.load('model/chinaJson.json', function (data) { let jsonData = JSON.parse(data); initMap(jsonData); // 解析并绘制地图 }); 绘制曲面地图 function initMap( chinaJson ) { //创建一个空对象

网页3D显示实践

系统中可能有产品的3D显示，Thress.js的例子如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一个可以开门的机柜</title> <style> *{ margin:0; padding:

MathProblem 79 Three humans, three monkeys, and a boat problem

One one side of a river are three humans, one big monkey, two small monkeys, and one boat. Each of the humans and the big monkey are strong enough to row the boat. The boat can fit one or two bodies (regardless of size). If at any time at either side of t

cube

In geometry, a cube is a three-dimensional solid object bounded by six square faces, facets or sides, with three meeting at each vertex. The cube is the only regular hexahedron and is one of the five Platonic solids. It has 6 faces, 12 edges, and 8 vertic

mkdir()和mkdirs()的区别

mkdir()和mkdirs()的区别 本文内容主要整理自Stack Overflow的问题：Difference between mkdir() and mkdirs() in java for java.io.File [closed] 问题起源 最近在实习工作中，将项目部署到新环境的服务器中时，遇到了mkdir()失败的问题。原因是在项目中配置的路径信息在新服务

字典(dict)

4.7 字典(dict) 字典是Python中一种非常重要的数据类型。字典和之前的列表、元组不同，里面的元素使用键-值对进行存储。通常字典中元素的键由字符串或数字等可哈希数据类型组成。 可以把字典想象成一个集合，只不过每个元素都是由键-值对组成。字典中的元素的键是不能重复的。字典中

Codeforces1699E Three Days Grace【数学】【DP】

分析： 一开始觉得是二分答案，发现行不通之后改为枚举最小值。 现在我将这若干个数分解，假设分解完之后得到的最小值为$i$，那么我就是要在最小值为$i$的基础上尽量最小化分解的各数的最大值。 考虑DP：设$f[x][i]$表示在分解结果最小值大于等于$i$的情况下，将$x$分解得到的最大值最小是多

three.js

import * as THREE from 'three'; // 导入轨道控制器库 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 导入gltf模型载入库 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 导入解压模型的库 import { D

MathProblem 5 Three wise men and mischievous boy problem

While three wise men are asleep under a tree a mischievous boy paints their foreheads red. Later they all wake up at the same time and all three start laughing. After several minutes suddenly one stops. Why did he stop? Solution 这道题的关键在于这三个都是聪明

reactjs中使用threejs从0到1

搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src/ 文件夹下的所有文件。（不要删除整个 src 文件夹，删除里面的源文件。） 安装路由依赖包和threejs依赖包 # tips: 注意版本兼容问题

WebGL进阶（3）环境遮挡图与强度

const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) const texture_s = new THREE.TextureLoader().load(require('../assets/images/happyface.png')) const texture_ao = new THREE.TextureLo

（2）添加轨道控制器查看物体(3D)

<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import { OrbitContro

three.js实现太阳系

前言 刚开始使用three.js时会不太熟悉，想写一些项目增加理解，网上翻了好多文章，不是画立方体就是画三角形，最后偶然看到这个网站，十分炫酷。 我们也许没那么牛逼，但我们可以整个简略版的太阳系来练练手，加强理解，增加熟练度。 实现目标 1、绘制宇宙背景。 2、添加宇宙星辰。 3、绘制行星

Three.js 笔记

Renderer 是 three 的主要对象，传入一个 Scene 和一个 Camera 到 Renderer 中，它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上 材质和几何体可以被多个网格对象使用 Mesh（网格）对象包含： Geometry（物体的形状） Material 对象在场景中相对于他父对象的位置、朝向、缩放

Chapter 5 Three-dimensional linear transformations

Chapter 5 Three-dimensional linear transformations

常见3d动画框架three.js

  canvas可以获取哪些上下文？也就是canvas.getContext()的参数有哪些？(多选)A. 2dB. webglC. webgl2D. bitmaprendererE. 3d 正确答案：A、B、C、D bitmaprenderer简绍文档：https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmapRenderingContext WebGL从入门到放弃 如何使

vue如何创建一个three场景

第一步:下载three的npm包  npm i three -S 第二步 创建容器  <div id="container"><div> 第三步 引入three文件 i mport * as THREE from 'three' 第四步 声明需要用到的对象(这些对象生命在export default外面的话会得到一定的性能优化：因为在data函数里面声明的话vue需要监听这

Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴

本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js 最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。 今天我打算用 Three.

Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴

本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js 最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。 今天我打算用 Three.

Three.js 学习_帮助类

1. ArrowHelper 用于在Three.js场景中添加一个箭头对象，用于模拟方向的三维维箭头对象.其代码定义如下： var origin = new THREE.Vector3(0, 0, 0); var xDir = new THREE.Vector3(1, 0, 0); var length = 1; var arrow = new THREE.ArrowHelper(xDir, origin, length, color); var