three.js

TextGeometry not showing

由 ￡可爱￡侵袭症＋ 提交于 2020-03-05 06:03:32
问题 I am trying out TextGeometry. I got it to work for BoxGeometry but TextGeometry does not seem to work. I have tried using different material like MeshNormalMeterial but it is still not working var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById("banner").appendChild( renderer.domElement ); var

TextGeometry not showing

由 空扰寡人 提交于 2020-03-05 06:03:09
问题 I am trying out TextGeometry. I got it to work for BoxGeometry but TextGeometry does not seem to work. I have tried using different material like MeshNormalMeterial but it is still not working var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById("banner").appendChild( renderer.domElement ); var

Transform HTML elements in conjunction with OrbitControls so that they appear to rotate with the objects in the scene

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-03-05 03:34:08
问题 I have created a Three.js scene in which there is a globe (with an Earth texture) that can be rotated using OrbitControls. I want to have labels that are "stuck" to a position on the globe i.e. a "Australia" label that is pinned to the Latitude & Longitude of the centre of Australia, which then moves with the Earth object when OrbitControls are used so that the pin always stays above it's location. For various reasons (easier to content manage, easier to style etc...) I need these labels to

Three.js extract rotation in radians from camera

由 依然范特西╮ 提交于 2020-03-05 01:09:47
问题 I've been struggling for a while with the concepts of quaternions and I think that it may have something to do with this particular challenge. If you know three.js, you may be familiar with the equirectangular panorama video example. What I've been trying to do is to simply extract the camera's rotation at any given moment in a format that I understand (radians, degrees...) for each axis. In theory, shouldn't I be able to simply tap into the camera's rotation.x/y/z parameters to find those

Polygon triangulation for globe

由 眉间皱痕 提交于 2020-02-28 08:43:32
问题 Is it real to fill all polygons? Codepen. As I get it ThreeGeoJSON can not fill polygons, outlines only. Also I've tried Earcut for triangulation. drawThreeGeo(data, radius, 'sphere', {color: 'yellow' // I want to edit fill color of lands, not outline color}) 回答1: I suggest you to use better map: countries.geojson The solution consists of following steps, for each shape: Put vertices inside of shape, so that when triangulated, it could bend around the globe, Run https://github.com/mapbox

为什么学习web前端开发，必须要掌握好JavaScript这门编程语言？

由 有些话、适合烂在心里 提交于 2020-02-26 21:31:56
相信每一个想要学习前端的人对于前端三剑客html+css+js都不会陌生，这些可以说是一个前端的基本配置，而在前端的世界里，没有什么是JavaScript实现不了的，你真的了解js吗？为什么学习web前端开发要学习JavaScrip，并且必须要掌握，且精通？ 关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。 而后端代码是用什么编写的则无所谓——不管是Java，PHP，.NET，Node.js还是其他——但是客户端就一定需要一个JavaScript开发人员。事实上，现在很多开发人员依然没有认识到JavaScript有多么强大。 JS实际使用的功能和领域，下面我们就来了解一下。 1.数据可视化 数据可视化是当下大家所推崇的一种互动展示模式，而Java拥有ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js等多种可实现数据可视化效果的框架。 2.移动应用 PhoneGap将WebView带向了移动应用，同时也将JavaScript带向了移动应用。 3.服务端 因为V8的性能将JavaScript带到了一个新的高度

WebGL Fillstyle

由 梦想与她 提交于 2020-02-25 04:07:31
问题 I currently have a canvas to which I am rendering a ThreeJS scene. Everything is working fine, however, I would like to display a transparent fill over it. With a normal canvas, I would simply do canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); This, of course, doesn't work because I'm using WebGL and the context is different. But I try to apply fillStyle to renderer.context Nothing happens. I checked via console and the property does appear in the context as so

WebGL Fillstyle

由 a 夏天 提交于 2020-02-25 04:07:11
问题 I currently have a canvas to which I am rendering a ThreeJS scene. Everything is working fine, however, I would like to display a transparent fill over it. With a normal canvas, I would simply do canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); This, of course, doesn't work because I'm using WebGL and the context is different. But I try to apply fillStyle to renderer.context Nothing happens. I checked via console and the property does appear in the context as so

WebGL Fillstyle

由 孤街浪徒 提交于 2020-02-25 04:07:05
问题 I currently have a canvas to which I am rendering a ThreeJS scene. Everything is working fine, however, I would like to display a transparent fill over it. With a normal canvas, I would simply do canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); This, of course, doesn't work because I'm using WebGL and the context is different. But I try to apply fillStyle to renderer.context Nothing happens. I checked via console and the property does appear in the context as so

Three.js prevent Raycast through Gui

由 你说的曾经没有我的故事 提交于 2020-02-25 03:44:07
问题 I want to select objects with raycasting, but everytime i want to select something on the three.js gui, the Mousdownevent get triggered. How can i say something like "if the Gui is in front of the object, dont trigger" document.addEventListener( 'mousedown', onDocumentMouseDown, false ); function onDocumentMouseDown( event ) { if (event){} the gui is a normal three.js gui made like this: gui = new GUI( { width: 330 } ); 回答1: One way to solve this is with jQuery and an additional control
订阅 three.js