three js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Three.js教程（1）：初识three.js

本教程有配套代码仓库，请点击https://github.com/KaiOrange/three.js-demo。 ---- 为什么要使用three.js 要回答为什么要使用three.js？...而three.js直接支持前3种渲染方式，可以看出three.js的强大。大多情况下如果是为了展示3D的效果，那么直接用图片就可以了，如果要动起来的话，视频往往可以胜任。...别急，正因为原生的WebGL这么晦涩难懂，所以才有了我们的主角three.js。...现在你可以忘掉上面的内容，因为three.js封装的特别好，根本看不到任何WebGL的影子，你再也不需要去了解什么着色器，更不用写GLSL ES，我们先来看一个更高级且更简单的three.js的例子。...初识three.js three.js可以使用模块化引入，当然也可以直接用script标签来引入。

24.7K7 4

three.js

阿谀奉承而无所图的人极少；爱奉承的话，就免不了要付出代价——佚名一个js的3D库 git仓库：https://github.com/mrdoob/three.js 官网：https://threejs.org

14K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

three.js 初步

首先推荐大家一个学习网站Tress.js中文网。...首先我们需要先引入tree.js 链接:https://pan.baidu.com/s/1SLQL6RChecY8gE7e-Jfn1g 密码:n4h8 My first three.js app</title...的统计目录 js/three.js"> //我们主要渲染代码都写到这儿.../js/three.js'>

5.6K5 0

【前端】Three.js

Three.js 基本概念渲染器（Renderer）渲染器将和Canvas元素进行绑定场景（Scene）在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。

8012 0

Three.js基础

new THREE.Vector3(-2, 2, 2), new THREE.Vector3(2, -2, 2), new THREE.Vector3(2...requestAnimationFrame(render); renderer.render(scene, camera); } } 创建几何体顶点和面就组合成了几何体 three.js...(1, 3, 1), new THREE.Vector3(1, 3, -1), new THREE.Vector3(1, -1, 1), new THREE.Vector3...new THREE.Face3(4, 5, 1), new THREE.Face3(5, 0, 1), new THREE.Face3(7, 6, 2), new THREE.Face3...(6, 3, 2), new THREE.Face3(5, 7, 0), new THREE.Face3(7, 2, 0), new THREE.Face3(1, 3

8371 0

three.js 曲线

上几篇说了three.js的曲线，这篇来郭先生来说说three.js曲线，在线案例点击three.js曲线 1....了解three.js曲线之前已经说了一些three.js的几何体，这篇说一说three.js曲线。曲线的种类主要分两种，二维曲线和三维曲线。...= new THREE.Geometry(); var curve = new THREE.LineCurve3(new THREE.Vector3(10, 20, 10), new THREE.Vector3...geometry = new THREE.Geometry(); var curve = new THREE.CubicBezierCurve3(new THREE.Vector3(-10, -20,...THREE.Vector3( -5, 20, -5 ),new THREE.Vector3( 0, -20, 0 ),new THREE.Vector3( 5, 20, 5 ),new THREE.Vector3

12.2K2 1

Three.js入门

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。...Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。...Three.js的核心五步就是： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器三维空间里的物体映射到二维平面的过程被称为三维渲染...//设置Three.js渲染器 var renderer; function initThree(){ width = document.getElementById...在Three.js也能够指定透视投影和正投影两种方式的相机。本文按照以下的步骤设置透视投影方式。

8.5K9 2

『Three.js』起飞！

本文简介点赞 + 关注 + 收藏 = 学会了本文使用 Three.js 的版本：137 本文使用原生三件套的方式去学习 Three.js。...是一篇面向小白的笔记~ Three.js 官网下载 Three.js Three.js GitHub地址通过上面的地址，可以下载 Three.js 这是下载下来解压后的文件创建项目我习惯使用...把刚刚从 Three.js 下载下来的包解压后，找到 src/Three.js ，并将其复制到 Three-study-demo/js 里项目到此就算创建好了。...-- 引入Three.js --> Three.js 。代码仓库 ⭐Three.js 起步

11.5K4 0

three.js 材质

今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关，因此，如果您决定使用不同的渲染器，不必重写材质。...1. three.js材质基类所有其他材质类型都继承了Material。下面是一些属性： .alphaTest : Float 设置运行alphaTest时要使用的alpha值。...默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。 .transparent : Boolean 定义此材质是否透明。...默认值为THREE.NoColors。其他选项有THREE.VertexColors 和 THREE.FaceColors。...将材质转换为three.js JSON格式。 2. three.js材质种类名称介绍 LineBasicMaterial 一种用于绘制线框样式几何体的材质。

10.9K5 0

Three.js 前言

本文非技术文章，着急开发的小伙伴请绕道----------------------------------------- 　　最近公司做了一套项目，主要是写机房管理，并且还要是一个3D模型，做3D，首先想到的是Three.js...，对于Three.js，我的了解不多，除了前两年用Three.js的Dome改造了一个年会抽奖系统外，其他的基本上也就仅仅停留在认识Three.js这几个英文字母上，这次这项目，对于我来说是个挑战，其实对于公司来说也是...，学习Three.js凉了这个项目基本上也就黄了。

7.3K2 0

学习Three.js

Intro 基于r95版本three.js。整理知识点，以及demo。...plane var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshBasicMaterial...(70, 2, 2); var wallRight = new THREE.CubeGeometry(70, 2, 2); var wallTop = new THREE.CubeGeometry...= new THREE.Mesh(wallRight, wallMaterial); var wallTopMesh = new THREE.Mesh(wallTop, wallMaterial)...= new THREE.Mesh( base, new THREE.MeshLambertMaterial({ color: 0xffe4c4, }) );

6601 0

『Three.js』场景 Scene

本文简介在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读『Three.js』起飞！...在使用 Three.js 的前，必须先了解 3大组件：摄像机、场景、渲染器。这是 Three.js 的必需品。本文讲解的是场景的用法。什么是场景？...Three.js 的场景只有1种，用 THREE.Scene 来表示。场景对象自身的属性和方法并不多，学起来非常简单。.../js/Three/Three.js' // 场景 const scene = new Scene() // 摄像机 const camera = new PerspectiveCamera.../js/Three/Three.js' // 省略部分代码 // 立方体 let geometry = new BoxGeometry(1, 1, 1) // 网格基础材质，设置颜色 let material

6.1K5 1

用Three.js建模

在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。...Three.js网格对象类型为THREE.Geometry，包含一系列的顶点（其类型为THREE.Vector3）。...在three.js中，u和v的值始终在 0.0 到 1.0 之间。...在three.js中，图像纹理由THREE.Texture对象表示。由于我们谈论的是网页，因此three.js纹理的图像通常从 Web 地址加载。...下面的演示允许查看一些设置了纹理的three.js对象。

8.7K0 2

three.js 事件交互

点击查看交互效果在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象，要使用RayCaster,是用于在三维空间中进行鼠标拾取...DOCTYPE html> three.js webgl - raycast - sprite three.js"> js/controls/OrbitControls.js"> var renderer, scene, camera; var controls...(new THREE.SpriteMaterial({color:"#69f",name:"hihi"})); var sprite = new THREE.Sprite(new THREE.SpriteMaterial

14.8K9 0

three.js 制作魔方

所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击three.js制作魔方。..., side: THREE.DoubleSide}); let mater_yellow = new THREE.MeshBasicMaterial({map: map_yellow, side...: THREE.DoubleSide}); let mater_white = new THREE.MeshBasicMaterial({map: map_white, side: THREE.DoubleSide...}); let mater_blue = new THREE.MeshBasicMaterial({map: map_blue, side: THREE.DoubleSide}); let...mater_green = new THREE.MeshBasicMaterial({map: map_green, side: THREE.DoubleSide}); materials

10K1 0

three.js 学习感悟

1.场景在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。...2.照相机我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？....position.set(1,1,5); scene2.add(camera2); //声明物体 var cube22 = new THREE.Mesh(new THREE.CubeGeometry...(2,2,2), new THREE.MeshBasicMaterial({ color: 0xff0000, map: THREE.ImageUtils.loadTexture....position.set(0,0,5); scene3.add(camera3); //声明物体 var cube32 = new THREE.Mesh(new THREE.CubeGeometry

3.5K1 0

Three.js深入浅出：4-three.js中的光源

而在众多的 3D 图形库中，Three.js 作为一款优秀的 JavaScript 3D 图形库，受到了广泛的欢迎和应用。...无论是创建引人入胜的交互式 3D 场景、还是打造惊艳的虚拟现实体验，Three.js 都展现出了强大的潜力和灵活性。...本系列文章将深入探讨 Three.js，从基础入门到高级应用，带领读者逐步掌握 Three.js 的核心概念和技术要点。...通过本系列文章的学习，读者将能够掌握使用 Three.js 创建精美的 3D 可视化效果，以及实现交互式的虚拟场景的能力。...本篇文章将带你深入了解Three.js中的光源类型、属性和使用方法，助你在创建虚拟世界时获得更加生动逼真的效果 1.

1.1K1 0

Three.js中光源

toc Three.js中光源基础光源 THREE.AmbientLight THREE.SpotLight聚光灯添加摄像机或者光源辅助线 THREE.PointLight...点光源 THREE.DirectionalLight平行光特殊光源 THREE.HemisphereLight半球光光源 THREE.AreaLight区域光 Lensflare镜头光晕...Intro Three.js中光源光源 THREE.AmbientLight 基本光源，该光源的颜色会叠加到场景现有物体的颜色上 THREE.PointLight 点光源，从空间上的一点向所有方向发射光线...不投射任何阴影 THREE.LensFlare 这不是一种光源，但是通过THREE.LensFlare为场景中的光源添加镜头光晕的效果上述都是基于THREE.Light对象扩展....需要一个THREE.Object3D对象（THREE.mesh）。

4690 0

Three.js教程（7）：材质

由上面我们知道MeshBasicMaterial是可以设置颜色的，只要把两种材质联合起来就可以了，这里说的联合材质并不是一种材质，而是把多个材质混合起来的一种办法，要使用联合材质首先需要引入SceneUtils.js...文件，该文件必须在three.js的下方引入，如下： three/examples/js/utils/SceneUtils.js"> 引入上面的JS文件后，会多出一个THREE.SceneUtils的类，该类的对象有一个...在老版本的three.js中有一个名叫MeshFaceMaterial的材质可以让不同面拥有不同的材质，这里就不简绍已经废弃的MeshFaceMaterial了。...---- 至此，three.js的基本概念我们已经讲完了，大家是不是收获满满？three.js看似东西多，其实基本套路都是一样的，就比如基本上所有的设置材质的方法都是类似的。

3K3 1

Three.js教程（4）：相机

相机这部分的内容并不是很多，Three.js主要支持两种相机，一种是PerspectiveCamera即透视投影摄像机，另一种是OrthographicCamera即正交投影摄像机。...( 50, window.innerWidth / window.innerHeight, 0.01, 100 ); scene = new THREE.Scene(); for (var...i = 0; i < rowNumber; i++) { for (var j = 0; j < rowNumber; j++) { geometry = new THREE.BoxGeometry...( boxSize, boxSize, boxSize ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh...( boxSize, boxSize, boxSize ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh

2.7K3 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭