小编gma*_*man的帖子
three.js-如何设置相机位置？
我是three.js和webgl编程的初学者。所以我在three.js中创建了一个盒子，它的工作正常，但是问题是当我在z轴上设置相机位置时（例如：camera.position.z = 2;），盒子消失了。谁能解释我为什么会这样，如何正确设置相机的位置？
尝试camera.position.z = 2;在小提琴中取消注释
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
//camera.position.z = 2;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();
推荐指数
解决办法
查看次数
如何在 Three.js 中获取蒙皮网格顶点的全局位置？
在 Three.js 中，由于这个问题，我们现在能够获取非蒙皮网格体顶点的全局位置，但是如何获取具有骨骼和变形目标的蒙皮网格体顶点的全局位置？
例如，(2.5, 1.5, 0.5)以下情况如何打印？
mesh.geometry.vertices[0]原来是在(0.5, 0.5, 0.5)。然后，bones[1]将顶点移动到(2.5, 0.5, 0.5)。最后，变形将顶点移动到(2.5, 1.5, 0.5)。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.z = 3;
camera.position.y = 2;
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.morphTargets.push({name: "morph", vertices: []});
for (const vertex of geometry.vertices) { …推荐指数
解决办法
查看次数
unity webgl 中带有数组参数的 SendMessage
Unity SendMessage只能传递一个参数，并且可以是一个数组。所以我正在调用 javascript 的 sendMessage 并调用 C# 方法（实际上是 webgl 方法）
var arr = [x,y,z];
gameInstance.SendMessage("Cube","SetGameObjectPosition",arr);
但出现这个错误
由于以下原因调用错误处理程序
Uncaught 2,2,2 没有 SendMessage 支持的类型。[违规]“单击”处理程序花费了 8994 毫秒 blob：http://localhost/1ff50200-cb3a-4367-ab45-f02e9734fac2:2 Uncaught 2,2,2 没有 SendMessage 支持的类型。
SendMessage @ blob：http://localhost/1ff50200-cb3a-4367-ab45-f02e9734fac2:2
发送消息@UnityLoader.js:4
SetObjectPosition @（索引）：44
onclick @（索引）：65（索引）：65
[违规]“点击”处理程序花费了 9000 毫秒
推荐指数
解决办法
查看次数
使用pixijs渲染多边形
我正在尝试在移动设备上显示超过 6000 个多边形。目前，我正在使用 d3.js 库在 Android WebView 中使用 SVG 路径来执行此操作。它有效，但我必须处理性能问题，当我拖动地图或缩放时，我的地图变得非常滞后。
我现在的想法是尝试用pixijs做同样的事情。我的数据最初来自 ESRI Shapefiles。我将这些 Shapefile 转换为 GeoJSON，然后转换为 SVG。我的顶点数组看起来像这样，我试图将其传递给 drawPolygon 函数
0：994.9867684400124 1：22.308409862458518 2：1042.2789743912592 3：61.07148769269074
但是当我尝试渲染这些多边形时，没有显示任何内容。这是我的代码：
var renderer = PIXI.autoDetectRenderer(1800, 1800, { backgroundColor: 0x000000, antialias: true });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
var totalShapes = feat.features.length;
for (var i = 1; i <= totalShapes -1; i++) {
var shape = feat.features[i];
var geometry = shape.geometry.bbox;
graphics.beginFill(0xe74c3c);
graphics.drawPolygon([ geometry]);
graphics.endFill();
stage.addChild(graphics);
renderer.render(stage);
}
有人可以帮助我或者建议我采用不同的方式吗？
推荐指数
解决办法
查看次数
Threejs lerp和相机动画不流畅
线性插值有什么问题？
在 update() 中，如果这是 animate() 并且当我在 update() 中调用 ZoomCamera() 时，有平滑的 lerp 但当我在这里调用时
function onObjectsClick(event) {
event.preventDefault();
setPickPosition(event);
raycasting(pickPosition, scene, camera);
pickedObject = intersectedObjects[0].object;
const notebook = pickedObject.getObjectByName('notebook');
const laptop = pickedObject.getObjectByName('laptop');
if (notebook || laptop) {
zoomCamera();
}
}
canvas.addEventListener('click', onObjectsClick, false);
如果 没有平滑的 lerp 但急剧的过渡我会错过什么？
function zoomCamera() {
const vec = new THREE.Vector3(-1, 2, 2);
const alpha = .1;
camera.position.lerp(vec, alpha);
console.log('zoom');
}
onObjectsClick 是在 animate() 中，
为什么会发生？
推荐指数
解决办法
查看次数
三.js渲染质量
我是 Three.js 和 3D 建模的新手。我设法加载我的 gltf 模型并使用 Three.js 在浏览器中显示它，请参见这张图片：
当我转动立方体时，我注意到渲染边缘的质量不是很高（在图片中，背面的边缘看起来“之字形”）。我可以以某种方式改进这个吗？
推荐指数
解决办法
查看次数
未捕获的语法错误：无法在模块外部使用 import 语句
https://www.youtube.com/watch?v=1TeMXIWRrqE
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style type="text/css">
html, body {margin: 0; padding: 0; overflow: hidden}
</style>
</head>
<body>
<div id="webgl"></div>
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script>
let scene,camera,renderer;
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
hlight = new THREE.AmbientLight(0x404040,100);
scene.add(hlight);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader(); //THE ERROR WITH THIS, I TRIED WITHOUT THREE. ONLY GLTLOADER() BUT DID NOT WORK
loader.load('scene.gltf', function(gltf){
scene.add(gltf.scene);
renderer.render(scene,camera);
});
}
init();
</script> …推荐指数
解决办法
查看次数
如何通过 Unity 使用 WebGL/C# 在新选项卡上打开链接？
目前通过我的游戏打开链接会在相同的界面中打开链接。我希望它在新选项卡上打开。我尝试研究插件等，以便 .jslib 文件与 Unity 项目交互，但我也遇到了问题。我是这种交互的新手，所以我在查找插件检查器本身时也遇到了问题。
目前，我的代码是这样做的：
private void Update()
{
if (Input.GetKeyDown(KeyCode.Return))
{
Application.OpenURL("www.google.com");
}
}
所以这会在同一浏览器上打开链接。我试图做到这一点，当用户点击返回键时，他们会在新浏览器上打开该链接。
任何帮助表示赞赏！
推荐指数
解决办法
查看次数
Three.JS - GLTF 模型加载缓慢。如何加快加载时间？
我将 GLTF 模型（9mb）加载到 ThreeJS 中。加载速度肯定很慢。在我的 PC 上加载大约需要 4-5 秒，在 iPhone 上加载大约需要 11 秒。如何加快渲染时间？我的 PC 和 iPhone 从 ThreeJS 网站加载示例的速度比我的项目更快。我的项目只加载了一个对象，所以我觉得它应该比 ThreeJS 网站上的示例加载得更快。
我的示例项目位于此处@http: //flowolfsworld.com/
代码
var ourObj;
var ourObj2;
// Instantiate a loader
var loader = new THREE.GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( '/js/draco/' );
loader.setDRACOLoader( dracoLoader );
let scene, camera, renderer, stars, starGeo;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.z = 25;
//renderer …推荐指数
解决办法
查看次数
适合 THREE.js 中平面上的比例映射纹理
我正在尝试在单个平面上“按比例调整”映射的图像纹理。有点模拟 的行为object-fit:cover。
因此图像贴图必须按比例放大或缩小才能完全覆盖整个平面。
我尝试尝试纹理的重复和偏移，但没有成功。（在我的代码中注释掉了）
正如您在下面的代码片段中看到的那样，图像仍然可以拉伸以适应。任何帮助表示赞赏！
var renderer = new THREE.WebGLRenderer({ canvas : document.getElementById('canvas'), antialias:true});
renderer.setClearColor(0x7b7b7b);
// use device aspect ratio //
renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window
renderer.setSize(window.innerWidth, window.innerHeight);
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
// MESH 0
// texture
var texture_0 = new THREE. TextureLoader().load("https://i.imgur.com/YO0ygMx.jpg");
texture_0.wrapS = THREE.ClampToEdgeWrapping;
texture_0.wrapT = THREE.RepeatWrapping;
// var tileWidth = 2;
// var …推荐指数
解决办法
查看次数
标签 统计
three.js ×7
javascript ×6
unity-webgl ×2
c# ×1
geojson ×1
gltf ×1
pixi.js ×1
polygon ×1
svg ×1