个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我是 three.js 的新手，正在尝试将模型加载到我的 Canvas 中。一旦我导入 GLTFLoader，我就会在控制台中看到上面的读数。到底是怎么回事？语法和相对路径看起来不错。我真的不明白发生了什么事。我添加了另一个文件夹来放入 master three.js 文件夹，但它不起作用。
import * as THREE from '../master/three.js-master/build/three.module.js'
import {GLTFLoader} from '../master/three.js-master/examples/jsm/loaders/GLTFLoader.js'
const canvas = document.querySelector('.webgl')
const scene = new THREE.Scene()
const loader = new GLTFLoader()
loader.load('../assets/scene.gltf', function(gltf){
console.log(gltf);
const root = gltf.scene;
scene.add(root);
}, function(xhr){
console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function(error){
console.log('error');
})
// const geometry = new THREE.BoxGeometry(1,1,1)
// const material = new THREE.MeshBasicMaterial({
// color: 'green'
// })
const boxMesh = new THREE.Mesh(geometry,material)
scene.add(boxMesh)
//Boiler Plate
const sizes = {
width: window.innerWidth,
height: window.innerHeight,
}
const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
camera.position.set(0,1,2)
scene.add(camera)
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
// renderer.outputEncoding = true
renderer.render(scene, camera)
console.log('working')<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas class="webgl"></canvas>
<script type = "module" src="scripts.js"></script>
<script>
</script>
</body>
</html>最佳答案
因为 r137 在浏览器中使用像 GLTFLoader 这样的 ES6 模块需要导入映射。在 canvas 正下方添加以下部分。
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../master/three.js-master/build/three.module.js"
}
}
</script>
您的 scripts.js 中的 three.js 导入语句如下所示:
import * as THREE from 'three'
关于javascript - GLTF 加载程序试用版返回类型错误 : Failed to resolve module specifier "three". 相对引用必须以 "/"、 "./"或 "../"开头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71037149/
24
4
0
在 CSS 中，我从来没有真正理解为什么会发生这种情况，但每当我为某物分配 margin-top:50% 时，该元素就会被推到页面底部，几乎完全消失这一页。我假设 50% 时，该元素将位于页面的中间位
我想在 MongoDB 中使用 Grails2.5 中的“ElasticSearch”插件。我的“BuildConfig.groovy”文件是: grails.servlet.version = "3
我有一个我想要处理的 OHLC 股票报价数组。 Open High Low Close Volume 2003-01-05
我尝试创建一个PreparedStatement: stmt = conn.prepareStatement("SELECT POLBRP, POLTYP, POLNOP, INCPTP, TRMTH
我的目录结构如下: root libA CMakeLists.txt ClassA.cpp libB CMakeLists.txt ClassB.cpp s
我是 DBMS 的新手。我在每个用户的不同 csv 文件中都有车辆痕迹。格式:名称，时间戳，纬度，经度，randomId。例如:user0,2008-10-2309:42:25,441972.6942
我需要为我的应用程序打上烙印，并且只需要自定义少量图像，代码库是相同的，只是生成的常量很少。 由于aapt 允许指定许多资源目录，有没有办法在Eclipse .classpath 文件中指定res 目
我希望在我的应用程序中实现 JWT，因为我正在通过引用以下内容对其进行一些研发:https://stormpath.com/blog/jwt-java-create-verify .当我尝试通过提取声
我正在尝试通过设置限制获取数据并根据时间戳对数据进行排序，但在运行应用程序时崩溃并显示此错误消息: 查询无效。在指定顺序之前不得指定起点。 我不知道为什么会这样。如何解决？ 我需要数据序列和排序。
我正在使用Elasticsearch和Tire进行Rails3项目。当我尝试运行Elastic-search时，安装它后，出现以下错误: The stack size specified is too
我创建了一个简单的函数来执行 Http PUT 请求 - public string checkIfUserExists(string userName) { var endP
Java 安全管理器允许通过定义如下子句来指定某些代码段的权限: ... grant codebase http://foo.bar.com/test.jar { permission java
这更像是一种验证。 在 Oracle/Java 教程页面上，例如 this , 我一直看到catch 旁边的“specify”就好像它是另一个语句在异常处理中具有一些功能。 据我所知，“catch o
本文整理了Java中org.batfish.specifier.ZoneNameRegexInterfaceSpecifier类的一些代码示例，展示了ZoneNameRegexInterfaceSpe
我正在尝试运行以下命令: ionic cordova run android --device 但我收到以下错误 BUILD FAILED in 3s (node:3956) Unha
在不包含 viewport 元标记的网页上，大多数移动浏览器会将页面上的部分或全部字体“提升”到大于 css 指定的大小。例如，在移动版 Safari 上，7px 的指定大小将提升为类似 12px 的
嗨，我不了解 keras fit_generator 文档。 我希望我的困惑是理性的。 有一个batch_size还有分批训练的概念。使用 model_fit() ，我指定一个 batch_size
我使用 IProviderSearchContext 在 Sitecore 8.1(Lucene 搜索)中搜索特定项目，并获得每个项目的两个版本(en、ar)。我的问题是:我是否必须为每个查询指定:
Except in a declaration of a constructor, destructor, or conversion function, at least one defining-
使用 GooglePageSpeed 分析在线商店(Shopware)导致每个图像上出现许多“未指定到期时间”的线条。 我想知道是因为网络服务器 (nginx) 在所有图像的响应中添加了 Last-M
我是一名优秀的程序员,十分优秀！