个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想将我的基本脚本(运行良好)移至 AngularJs这是我的 Controller 和基本的 html。当我执行此操作时，它不会显示任何错误，只是得到空白页面。在内部，元素获得了信息，但我看不到任何东西。我觉得我错过了一些东西，但我看不到它。
1-当启动 Angular 项目时，我执行 iniciar() ($scope.iniciar())
2-我尝试区分 ThreeJs 的基本对象
3-当一切正常时，我渲染所有内容，但不显示对象(香蕉)
谢谢!
/************ Controller *************/
'use strict';
/**
* @ngdoc function
* @name myApp.controller:CanvasCtrl
* @description
* # CanvasCtrl
* Controller of the myApp
*/
angular.module('myApp')
.controller('CanvasCtrl', function ($rootScope,$scope,config) {
$scope.renderer = null;
$scope.canvas = null;
$scope.camera = null;
$scope.scene = null;
$scope.directionalLight = null;
$scope.objeto = null;
$scope.manager = null;
$scope.loader = null;
$scope.iniciar = function() {
/* SCENE */
$scope.scene = new THREE.Scene();
/* CANVAS */
$scope.renderer = new THREE.WebGLRenderer({ alpha: true });
$scope.canvas = angular.element('#myCanvas');
$scope.renderer.setSize($scope.canvas.width(), 700);
/* CAMARA */
$scope.camera = new THREE.PerspectiveCamera(50, $scope.canvas.width() / 700, 0.1, 10000);
$scope.camera.position.set(0, 0, 500);
$scope.scene.add($scope.camera);
/* DIRECTIONAL LIGHT */
$scope.directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
$scope.directionalLight.position.set(0, 0, 350);
$scope.directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
$scope.scene.add($scope.directionalLight);
/* Load OBJ */
$scope.loadOBJ();
};
$scope.loadOBJ = function() {
/* LOADING MANAGER */
$scope.manager = new THREE.LoadingManager();
$scope.loader = new THREE.OBJLoader($scope.manager);
/* LOAD OBJ */
$scope.loader.load('http://mamboleoo.be/learnThree/demos/banana.obj', function(object) {
$scope.objeto = object;
$scope.objeto.rotation.x = Math.PI / 2;
$scope.objeto.position.y = -200;
$scope.objeto.position.z = 50;
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = new THREE.Color(0X00FF00);
child.geometry.computeVertexNormals();
}
});
/* Add object to Scene */
$scope.scene.add($scope.objeto);
$scope.render();
});
};
$scope.render = function() {
requestAnimationFrame($scope.render);
$scope.objeto.rotation.z += 0.01;
$scope.renderer.render($scope.scene, $scope.camera);
};
});
/************HTML****************/
<!doctype html>
<html>
<head>
<some angular's js>
<some css's>
</head>
<body ng-app="myApp" ng-controller="CanvasCtrl" data-spy="scroll" data-target=".navbar" data-offset="60">
<div ng-init="iniciar()">
<canvas class="col-md-12" id="myCanvas"></canvas>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://mamboleoo.be/learnThree/demos/OBJLoader.js"></script>
<script src="scripts/controllers/canvasCtrl.js"></script>
</body>
</html>
最佳答案
这段代码会对你有所帮助。
angular.module('myApp', [])
.controller('CanvasCtrl', function($rootScope, $scope) {
$scope.renderer = null;
// $scope.canvas = null;
$scope.camera = null;
$scope.scene = null;
$scope.directionalLight = null;
$scope.objeto = null;
$scope.manager = null;
$scope.loader = null;
$scope.iniciar = function() {
/* SCENE */
$scope.scene = new THREE.Scene();
/* CANVAS */
$scope.renderer = new THREE.WebGLRenderer({ alpha: true });
$scope.canvas = document.getElementById('myCanvas');
$scope.renderer.setSize($scope.canvas.width, 700);
document.body.appendChild($scope.renderer.domElement);
/* CAMARA */
$scope.camera = new THREE.PerspectiveCamera(50, $scope.canvas.width / 700, 0.1, 10000);
$scope.camera.position.set(0, 0, 500);
$scope.scene.add($scope.camera);
/* DIRECTIONAL LIGHT */
$scope.directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
$scope.directionalLight.position.set(0, 0, 350);
$scope.directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
$scope.scene.add($scope.directionalLight);
/* Load OBJ */
$scope.loadOBJ();
};
$scope.loadOBJ = function() {
/* LOADING MANAGER */
$scope.manager = new THREE.LoadingManager();
$scope.loader = new THREE.OBJLoader($scope.manager);
/* LOAD OBJ */
$scope.loader.load('http://mamboleoo.be/learnThree/demos/banana.obj', function(object) {
$scope.objeto = object;
$scope.objeto.rotation.x = Math.PI / 2;
$scope.objeto.position.y = -200;
$scope.objeto.position.z = 50;
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = new THREE.Color(0X00FF00);
child.geometry.computeVertexNormals();
}
});
/* Add object to Scene */
$scope.scene.add($scope.objeto);
$scope.render();
});
};
$scope.render = function() {
requestAnimationFrame($scope.render);
$scope.objeto.rotation.z += 0.01;
$scope.renderer.render($scope.scene, $scope.camera);
};
});
关于javascript - ThreeJs + AngularJs + OBJLoader 不渲染任何内容，也不显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44219962/
26
4
0
我们想要创建一个 3D 鞋子设计工具，您可以在其中设计图案并将其上传到鞋子上。 我正在尝试将图像放置在 Threejs Material 上。我可以更新 map ，但纹理很模糊。我是 Threejs
我正在尝试在 ThreeJS 中加载 FBX 模型。如果我加载模型，它只会从底部显示，而不是从顶部显示。似乎只渲染了一侧。 有没有人想解决这个问题？ 我的加载函数: _LoadAnimatedMode
使用 Three.js，(虽然我相信这与数学更相关)我有一组可以创建二维几何体的二维点。例如正方形、矩形、五边形或自定义 2D 形状。基于原始的 2D 形状，我想创建一种方法来像附图那样均匀地向内或向
我正在尝试创建一个在所有方面都镜像的对象。它几乎可以正常工作，但我不确定我在这里做错了什么。我只能看到某些 Angular 部分反射，并且反射的范围比被反射的物体(大象)大得多。这是代码:
无论导入场景，还是通过代码创建每个网格和灯光，都会出现以下问题。 我的场景由一个平面、一个立方体和一个聚光灯组成。聚光灯在 y 轴上旋转 45 度。在示例 1 中，它位于点 (4, 0, 4)。在示例
上下文: 我正在开发一个非常简单的 THREE.JS 项目，我相信它已经以非常好的方式进行了优化。我正在使用 WebGLRenderer 来显示每 50 毫秒从音频信号中提取的大量波特图。这非常酷，但
我正在编写一个全景查看器。图像显示在具有可变数量面的球体中。我希望它只在相机方向渲染脸部(以获得更好的性能)。 ThreeJS 会自动执行此操作吗？或者我可以声明不渲染的混搭的特定面吗？ 像mash.
我使用十六进制值设置几何颜色 RichGeometry.prototype = new THREE.Geometry(); RichGeometry.prototype.constructor = R
因此，我查看了此处的所有其他影子问题，但似乎没有一个与我的相关，或者我只是忽略了它大约 10 次。 https://gist.github.com/Sinistralis/58249d2f9aefa8
所以我有一个 ThreeJS 场景，并且添加了一些球体(多 Material )。我还添加了定向光: this.light = new THREE.DirectionalLight( 0xFFFFFF
我在“two.js”中创建了一个立方体，但我想创建同一个立方体 3 次，然后将它们作为目标，以便可以使用“Tweenmax”单独对它们进行动画处理 我是 Three.js 的新手，因此我们将不胜感激
我想要实现的是让特定的网格体向特定的向量移动，直到它最终被玩家停止。 到目前为止，我已经成功获取了单击 Canvas 的 XY 坐标，并使用以下代码将它们投影到 3D 中。不幸的是，我不确定采取什么方
我遇到了 Object3D 组中的面上未接收到阴影的问题。 阴影从物体转换并被地面接收，但阴影在应该被接收的时候却没有被彼此接收。 我四处搜寻，但似乎找不到类似的问题，这让我相信我的设置不正确。 有人
我正在尝试为我的类(class)创建一个场景，其中必须克隆一组对象(模型)并将其显示在随机位置。我为此创建了一个函数，但不幸的是，它只能将同一个对象从一个地方传输到另一个地方。我需要添加更多对象而不是
我正在尝试动态更改选定顶点的颜色。引用https://jsfiddle.net/pmankar/m70cpxes/ ，我创建了一个二十面体几何点云几何体，并且在单击事件时我想更改顶点 100 的颜色。
我已将球体添加到场景中，并在场景中添加了一些平面几何图形，当我放大时，我希望平面几何图形看起来更小，当我缩小时，平面几何图形应该显得更大，我不知道如何解决这个问题有人可以帮我解决这个问题吗？ 最佳答案
我开始学习使用 Threejs 创建旋转 3D 立方体。我关注了this教程，但为对象的旋转设置动画不起作用。 在此之前，我收到旋转未定义的错误。我在 animate() 中使用以下代码解决了这个问题
当我执行某些几何体的渲染时，我可以在控制台中看到此警告: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter sho
您好，我有一个疑问： 我已经实现了光线投射器，并且已经进行了手动测试，但是我不知道为什么在3D模型上进行的大多数点击都没有得到交点。 首先，我将向您展示我单击的点，然后向您显示在Web控制台中记录的点
您好，我有一个疑问: 我研究过: https://threejs.org/docs/#api/materials/PointsMaterial 我已经调整了该示例以与我现有的代码一起使用。 目的是在我
我是一名优秀的程序员,十分优秀！