ThreeJS camera.lookAt()没有效果,有什么我做错了吗？ - 腾讯云开发者社区

本文是threejs系列的第五篇，阅读前面的文章有助于更好的理解本文： ---- 1.一个简单的案例，理解threejs中几个基本概念 2.三维世界中的坐标系 3.3d弹弹球 4.3d弹弹球(加强版)...在3d弹弹球一文中，我们创建了一个plane平面，平面上有一个球弹来弹去，本文因为只考虑相机问题，因此我将页面模型简化，只留下坐标系和弹弹球，去掉plane，代码如下： var scene = new...可以看到，蓝色的线即为z轴，因为相机y轴还是0，因此没有立体感，将相机沿y轴也移动30个单位，就有立体感了，如下： camera.position.y = 30; 显示效果如下： ?...后就可以拍摄了吗？...当然，up也可以调整为其他位置，但是要注意，up要垂直于lookAt，否则threejs可能不知道你到底想干嘛。好了，相机的位置参数我们就先说这么多，有问题欢迎留言讨论。

1.4K7 0

嘿，你有没有发现我今天有什么不同？

下面举个例子某天，你女朋友/老婆（没有请直接跳过这一段）撸了个2小时的妆来到你面前，满脸期待的问你，“你觉得我今天有什么不一样？” 内心OS：没什么不同啊？？？...直男回答（冷漠脸反问）：有什么不一样？正确回答（调动所有脸部肌肉）：哇塞！你这眼影画的也太好看了吧，怎么做到的？今天，他二哥现学现用，也有个天问要问你，“你觉得我今天有什么不一样？”...觉得有用的话，记得添加为“我的小程序”哦。技术范这个就厉害啦！...在体验过程中，你有什么建议甚至是对公众号的建议可以在本篇文章下面留言给我们，被精选的留言即可获得我们送出的QQ公仔一个哦。 ?

7774 0

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

是的

没有找到

第168期：看起来不像立方体

封面图在上一节中，我们用threejs成功创建了一个蓝色的立方体。...如果我们将网页放大一些，会看到这个立方体的边缘并不是直线，而是有很多的锯齿形状。为什么会出现这种现象呢？下面我们来一个一个的弄明白其中的缘由。...// 设置相机位置 camera.position.set(0, 0, 10) // 设置镜头方向 camera.lookAt(0, 0, 0) 此时观察页面，发现我们只能看到一个正方形，难道立方体消失了吗...而体现在threejs 中则是这种材质需要能够对光照有反应。既然需要光，那么我们先在场景中添加一个光源。...此时我们观察页面，发现我们已经可以看到有黑色的阴影出现了，有了一定的立体效果。就像给姑娘拍照一样，好看的照片需要优雅的姿势，和适合的灯光来配合。

2162 0

三维世界中的坐标系

上篇文章中介绍了threejs中几个基本概念，例如场景、相机、渲染器以及组件等，并通过一个简单的案例向小伙伴展示了这些东西的用法，本文来看看threejs中的坐标体系。...本文是threejs系列的第二篇，阅读前面的文章有助于更好的理解本文： ---- 1.一个简单的案例，理解threejs中几个基本概念 ---- 坐标体系首先，threejs中坐标体系是右手坐标系，如下图...默认位置按理说，场景是不需要坐标这个概念的，其他的组件和相机是有坐标的，在上文的案例中，读者可以在浏览器控制台打印出所有的坐标： ?...不过读者看到，这里红色是x轴，绿色是y轴，好像没有看到z轴？...好了，本文的介绍就说到这里，有问题欢迎留言讨论。本文案例：https://github.com/lenve/threejsDemo

2.2K4 0

Threejs入门之二:引用Threejs并创建第一个3D图形

6.Renderers：渲染器相当于电影的后期合成，我场景有了，物体也准备好了,相机拍摄完成了，就需要用渲染器把拍摄的东西通过合成展现出来。...根据前面的分析，假设我们现在在拍摄一个火车进站的场景，那么我们首先就需要布置一个这样的场景，所以，我们首先要创建一个场景// 创建一个场景const scene = new THREE.Scene()5.有了场景...设置相机的位置camera.position.set(200,200,200)另外，我们相机想要拍摄那个点位，需要将相机瞄准那个点位，所以我们还需要设置相机看向的点位// 设置相机聚焦的位置为坐标原点camera.lookAt...)11.将场景和相机放入渲染器renderer.render(scene,camera)12.至此，我们整改场景已经建设完成了，但是别急，此时你运行html文件在浏览器上还看不到任何的东西，是因为我们没有指定一个容器用来放置渲染器...，相当于我们电影拍摄好了，但是我们没有电视机，看不了，是不是好尴尬；还记得我们最早的html文件吗？

1.9K4 1

Threejs入门之十一：创建旋转的地球

经过前面几个章节的介绍，我们对Threejs已经有了一个相对深入的了解，下面我们通过Threejs来做一个旋转的地球效果。...首先在电脑上创建一个earth文件夹，在earth文件夹中创建images文件夹用于存放图片文件；创建一个js文件夹用于存放JavaScript代码；创建一个css文件用于存放css样式表文件； 2.拷贝资源，将Threejs...THREE.PerspectiveCamera(75,width/height,0.1,800)设置相机的位置和相机朝向的物体// 相机位置camera.position.set(200,200,200)// 相机朝向camera.lookAt...THREE.PerspectiveCamera(75, width / height, 0.1, 800)// 相机位置camera.position.set(200, 200, 200)// 相机朝向camera.lookAt

1.6K1 0

Threejs入门之三:让物体跟随鼠标动起来

的一个扩展库，其本身不在threejs的基础库里面，其位于threejs—examples—jsm—controls文件夹下面，我们在上一节引入threeJS的下面添加如下代码进行引入"three/addons...4.相机设置完成后，我们运行浏览器，点击鼠标控制物体发现物体依然没有旋转，这是因为我们虽然用鼠标控制物体旋转了，但是我们的画布没有重新渲染导致的，我们前面提到过，要想将场景中物体展示到容器中，需要用渲染器进行渲染后展示...将物体添加到场景中，相当于将物体添加到画布汇总scene.add(mesh)// console.log(mesh);// 创建一个相机，相机相当于画家的眼睛，// PerspectiveCamera 透视相机：有四个参数...(0,0,0)// 相机看向物体camera.lookAt(mesh.position)// 创建webgl渲染器const renderer = new THREE.WebGLRenderer()//...canvas画布宽高renderer.setSize(width,height)// 执行渲染操作，将scene和camera关联起来，// 相当于太阳，你有一个空间scene，空间中有物体，有人的眼睛

3.4K3 0

Threejs进阶之十五：在Thereejs 使用自定义shader

最终效果先看下这次代码最终要实现的效果，效果分析：要实现上述效果，我们需要两张图片，作为纹理贴图，使其图案产生明暗效果；然后通过定义ShaderMaterial对象通过自定义Shader...实现上述效果；后面代码中会进行详细分析；这里我们先介绍下基础知识什么是 Shader Shader（着色器）是一种在图形处理单元（GPU）上执行的程序，它定义了如何根据输入数据（例如顶点位置，纹理坐标等...，还不知道如何通过vite+vue3+threejs构建三维场景的小伙伴可以看我以前的博客：Threejs进阶之一：基于vite+vue3+threejs构建三维场景，这里不在赘述新建ShaderView.vue...文件并引入Threejs 在Vue项目的components中新建ShaderView.vue，引入Threejs及其相关库 import * as THREE from 'three' import...THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000) // 设置相机位置 camera.position.z = 5; camera.lookAt

1.8K4 0

使用dat.GUI实现参数快速调节

上篇文章和读者分享了相机的位置参数问题，读者发现，每次参数调整都需要先修改代码再刷新页面才能显示出效果，有没有更快捷的方式呢？有，那就是dat.GUI，本文就来看看这个东西的使用。...本文是threejs系列的第五篇，阅读前面的文章有助于更好的理解本文： ---- 1.一个简单的案例，理解threejs中几个基本概念 2.三维世界中的坐标系 3.3d弹弹球 4.3d弹弹球(加强版)...this.camerax = 0; this.cameray = 0; this.cameraz = 60; this.camera_rotation = '[0, 1, 0]'; }; 我这里配置了相机的...最后在显示方法中指定lookAt即可，如下： function show() { step += 0.04; camera.lookAt(0, 0, 0); sphere.position.x...* (Math.abs(Math.sin(step)))); requestAnimationFrame(show) render.render(scene, camera); } 效果

2.3K4 0

不到30行代码实现一个酷炫H5全景

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言：本文将围绕：了解什么是全景 --> 怎么构成全景 --> 全景交互原理来进行讲解，手把手教你从零基础实现一个酷炫的Web全景...小白也能学习，建议收藏学习,有任何疑问，请在评论区讨论，笔者经常查看并回复。一、了解什么是全景 1.1 全景定义定义：全景是某一空间的_全部_景色。...低 ThreeJS 免费是高中支持WebGL的部分浏览器易高全景工具(Krpano) 收费否易无支持flash和canvas的浏览器难中作为一个有追求（瞎折腾）前端开发，...Jietu20210527-172203-HD.gif 至此，我们全景制作已经完成了，（只统计js代码：共_28行_代码,我才不是标题党呢？?）。...记录滑动起始的位置（startX，startY） touchmove：记录当前位置（curX，curY）相减上一次位置的值，计算出弧长除于半径乘以factor，计算出（lon，lat） touchend：暂时没有用的

2.4K4 0

Three.js 手写跳一跳小游戏（上）

新建一个 html，引入 threejs： <!...three.js 涉及到这些概念： Mesh 是物体，它要指定是什么几何体 Geometry，什么材质 Material。 Light 是光源，有了光源才能看到东西，并且有的材质还会反光。...不过现在背景颜色太浅了，对比不明显，我们调深一点：好多了：但不知道大家有没有发现，现在是有锯齿的：这个的解决很简单，给 WebGLRenderer 传个参数就好了： const renderer...大家见过这种摄像方式没有：想拍一个运动的人，可以踩在平衡车上，手拿着摄像机跟着拍，这样能保证人物一直在镜头中央。在 threejs 世界里也是一样，玩家跳过去之后，摄像机跟着移动过去。...我们通过动画的方式改变玩家位置和相机位置，并且玩家还有一个向上的速度，只不过逐步递减，这样就实现了跳的效果。现在还有很多地方没做完，但已经有雏形了。下篇文章我们继续搞。

5022 0

3d弹弹球

本文是threejs系列的第三篇，阅读前面的文章有助于更好的理解本文： ---- 1.一个简单的案例，理解threejs中几个基本概念 2.三维世界中的坐标系 ---- 绘制平面使用threejs中提供的...plane.position.z = 0; scene.add(plane); camera.position.z = 30; camera.position.x = -30; camera.position.y = 20; camera.lookAt...由于这个平面默认平行于电脑平面，读者可以看不出三维效果，因此首先将这个平面绕x轴旋转180度（不旋转，看到的效果就是屏幕上一个灰色的长方形），同时修改相机的观察位置，最后绘制平面，结果如下： ?...跳动的球使球跳动起来的方式有很多种，这里通过修改球的x轴、y轴坐标来实现这一功能，如下： var step = 0; function show() { step += 0.04; sphere.position.x...好了，本文先介绍到这里，有问题欢迎留言讨论。本文案例：https://github.com/lenve/threejsDemo

5863 0

第167期：threejs最简单的例子

这是因为虽然我们创建了场景、相机和渲染器，但是我们并没有向场景中添加物体，所以接下来我们在代码中加入下面的代码： // 创建几何体 const geom = new THREE.BoxGeometry(...明明我们已经向场景中添加了一个蓝色的立方体，为什么我们却看不到它呢？是相机的问题。...同理，threejs中的相机就好比是一双眼睛，我们这里使用的是透视相机PerspectiveCamera，它的构造函数有四个参数： fov，( field of view )视野。...，但是如果我们把眼睛闭起来，就算把好东西放到我们眼前，我们仍旧无法看到它到底是个什么东西。...我们改变一下相机的位置，加入以下代码： // 设置相机位置 camera.position.set(0, 10, 10) // 设置镜头方向 camera.lookAt(0, 0, 0) 然后再次查看页面

3582 0

第2章还记得点、线、面吗(二)

1、右手坐标系Threejs使用的是右手坐标系，这源于opengl默认情况下，也是右手坐标系。...在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。5、线条的深入理解在Threejs中，一条线由点，材质和颜色组成。...点由THREE.Vector3表示，Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点...p1 = new THREE.Vector3( -100, 0, 100 );var p2 = new THREE.Vector3( 100, 0, -100 );请大家思考一下，这两个点在坐标系的什么位置...6、画高中时深爱的坐标平面我还深爱着高中时的那个坐标平面，它勾起了我关于前排同学的细细长发的回忆…这个平面的效果如下所示,截图不完整哦：图片它横竖分别绘制了20条线段，在摄像机的照射下，就形成了这般模样

7293 0

Threejs进阶之十三：CSS3DRenderer与Tween.js实现粒子小球按规律变化

今天我们使用CSS3DRenderer+Tween.js实现Threejs官方示例中的粒子小球按规律变化的效果，先看下最终实现的效果先来分析下，这个页面的动画效果是由512个小球组合起来的四种不同变化...，分别是曲面、立方体、随机和圆球四种变化；下面我们来实现下这个效果初始化页面老套路，要实现上面的效果之前，我们需要先将Threejs的基础场景搭建起来，这个是老生常谈的事情了，不在赘述，不知道怎么创建的小伙伴请参考我前面的博客文章基于...vite+vue3+threejs构建三维场景这里直接上代码 import * as...THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,5000) camera.position.set(600,400,1500) camera.lookAt...THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,5000) camera.position.set(600,400,1500) camera.lookAt

1.1K3 0

Three.js 实现 360 度全景浏览的最简单方式

什么是全景图？一般我们拍照都是拍一个方向，而全景图是拍上下左右前后 6 个方向，360 度，这样能够立体的记录所在的场景。那全景图怎么浏览呢？...这也是为什么全景图浏览也叫天空盒，因为就是通过立方体贴图的方式实现的。当然，也可以用球体来做，直接贴上一个大的全景图，相机放在中间，转动相机也可以看到不同方向的内容。...有了 3D 的 Scene，设置好了相机，就可以用 Renderer 把它渲染出来了。...来看下效果： ‍ 全部代码上传了 github：https://github.com/QuarkGluonPlasma/threejs-exercize 有工具来做，我是用的 PTGui （试用版）来做的裁切。官网有下载地址：https://www.ptgui.com/download.html?

4.7K5 1

Threejs入门之七:Threejs中的几何体

前面的代码中我们一直使用立体缓冲几何体BoxGeometry来构造物体，这样构造出来的是一个长方体或正方体，Threejs提供了很多几何体的API，如圆形缓冲几何体、圆锥缓冲几何体、圆柱缓冲几何体等，下面一一进行介绍...THREE.MeshLambertMaterial({ color:0x00ffff,//设置颜色 wireframe:true,//线条模式渲染mesh对应的三角形数据}) 观察图形发现，这个立方体的每一个面都是有两个三角形组成的...中提供了很多几何体的API，这里由于篇幅的原因，就不一一赘述了，具体可以查看Threejs的官方文档。...THREE.PerspectiveCamera(70,width/height,1,800)// 设置相机的位置camera.position.set(200,200,200) // 相机看原点// camera.lookAt...(0,0,0)// 相机看向物体camera.lookAt(mesh.position) // 创建webgl渲染器const renderer = new THREE.WebGLRenderer()/

1.7K3 0

# threejs 基础知识点汇总

threejs 基础知识点汇总之前写了几篇博文，但是我觉得写的不好，我今天再补充一篇还不好的，把基础知识点汇总一下，不写运行的代码了，只写关键代码，但是看了之前我写的那几篇，看这篇的话问题其实不大。...如果你想要安装特定版本的Three.js，你可以指定版本号，例如： npm install three@0.128.0 threejs 使用先创建一个Dom 如果将Threejs渲染的三维效果展示到电脑页面...可以简单理解一下：我们创建的模型，就是一个网格模型（物体），比如一个箱子；这个箱子长啥样、有多大，就是几何体（物体形状）控制；这个箱子是什么颜色、粗糙度这种样式是由材质（物体外观）控制。...如果渲染器背景为黑色，无特殊情况下，建议使用相同的颜色做为雾化效果。 Three.js 射线控制器Raycaster 光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。...在这个过程中，并没有直接把手指怼到山上，朋友依旧可以理解我们的意思。同理在三维场景中，我们想要获取某个物体，并不需要让鼠标怼到模型上。在threejs中，提供了射线控制器，可以帮我们实现类似的效果。

3871 0

我把文件重新编码后，加载速度提升300%！

这是我的耻辱！那么今天我就拿其中一个案例来展开聊聊，用最通俗的语言，给你抽丝剥茧讲明白。先看效果！...直到有一天，我发现我编码的文本里有一个鬼东西，原文中肉眼不可见，编码后是一个极其容易被忽视的小红点，我用代码读它，发现这东西的ASCII编码值是26。...Buffer.from(dataview.buffer) 我先帮大家捋一捋整体流程，大致如下：为什么我们没有用理想操作模型呢？两个文件流pipe一下，中间加一个转换器做一个编解码，搞定！...ThreeJS天然支持PCD文件的渲染，但前提是，必须有标准头，也就是这个东西。有了头部元信息之后，剩下的部分就是「点云二进制」数据，ThreeJS天然支持。...到这里，其实我帮大家挑出来的关键点就都扯清楚了，最后还剩一个疑问，为啥要用createWriteStream 来写文件？有什么特殊考虑吗？

4382 0

用 Three.js 画一个哆啦A梦的时光机

那坐时光机是什么样的体验呢？我用 Three.js 写了一下，应该是这种感觉：我们一起来实现一下。首先，我们过一下 Three.js 的基础：在二维屏幕上渲染三维物体，得有个坐标轴。...每一帧渲染的时候，改变物体的位置、颜色、旋转角度等就可以实现动画效果了。大家想一下，时空隧道用什么几何体比较合适呢？...但是你刷新页面会发现没有变化，因为 MeshBasicMaterial 的材质是不反光的。换成 MeshPhongMaterial 的材质，这种材质有金属质感，会反光。...为什么不是绕 z 轴转？因为这个圆柱已经绕 x 轴顺时针转了 90 度，所以是绕 y 轴转，看到的是绕 z 轴转的效果。...全部代码上传了 github：https://github.com/QuarkGluonPlasma/threejs-exercize 不到 100 行： <!

4543 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

三维世界中相机的位置参数

嘿，你有没有发现我今天有什么不同？

第168期：看起来不像立方体

三维世界中的坐标系

Threejs入门之二:引用Threejs并创建第一个3D图形

Threejs入门之十一：创建旋转的地球

Threejs入门之三:让物体跟随鼠标动起来

Threejs进阶之十五：在Thereejs 使用自定义shader

使用dat.GUI实现参数快速调节

不到30行代码实现一个酷炫H5全景

Three.js 手写跳一跳小游戏（上）

3d弹弹球

第167期：threejs最简单的例子

第2章还记得点、线、面吗(二)

Threejs进阶之十三：CSS3DRenderer与Tween.js实现粒子小球按规律变化

Three.js 实现 360 度全景浏览的最简单方式

Threejs入门之七:Threejs中的几何体

# threejs 基础知识点汇总

我把文件重新编码后，加载速度提升300%！

用 Three.js 画一个哆啦A梦的时光机

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐