I am trying to use a library installed by npm in the Go template.
I installed the necessary three libraries through 'npm install three', saved in the root folder as shown in the screenshot below.
After that, I try to import and use the three.js module as shown below, but threejs is not found.
I think there is some problem with the filesystem, how can I use threejs without problems in my situation?
import * as THREE from "/three";
class App{
constructor(){
// 장면
const scene = new THREE.Scene();
// 카메라
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 렌더러
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
}
window.onload = function(){
new App();
}
error
import * as THREE from "/three";
http://localhost:8081/three net::ERR_ABORTED 404 (Not Found)
import * as THREE from "three";
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
e.Static("/node", "node_modules") in main.go
import * as THREE from "/node/node_modules/three/builld/three.module.js";
GET http://localhost:8081/node/three/builld/three.module.js net::ERR_ABORTED 404 (Not Found)
<script type="importmap">
{
"imports": {
"three": "/node/three/build/three.module.js"
}
}
</script>
It was resolved by correcting the path to the job.
Related
I followed these examples to make the outline for objects when they are selected:
https://threejs.org/examples/?q=out#webgl_postprocessing_outline
https://github.com/scqilin/three-OutlinePass
No error is found, yet outline does not appear when the object is selected. The highlightSelectedObject function is correcly triggered when an object is selected. selectedObjects is not null.
In my case, THREE.js is installed in the project file. Scene, camera and renderer are instantiated elsewhere.
import * as THREE from "../../build/three.module.js";
import {OutlinePass} from "../../examples/jsm/postprocessing/OutlinePass.js";
import {RenderPass} from "../../examples/jsm/postprocessing/RenderPass.js";
import {EffectComposer} from "../../examples/jsm/postprocessing/EffectComposer.js";
Function:
function highlightSelectedObject(selectedObjects) {
if (selectedObjects != null) {
const scene = project.currentScene.scene;
const camera = project.currentScene.camera;
const renderer = project.renderer;
var composer = new EffectComposer(renderer);
var renderPass = new RenderPass(scene, camera);
var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, selectedObjects);
outlinePass.renderToScreen = true;
outlinePass.selectedObjects = selectedObjects;
composer.addPass(renderPass);
composer.addPass(outlinePass);
const params = {
edgeStrength: 2,
edgeGlow: 1,
edgeThickness: 1.0,
pulsePeriod: 0,
usePatternTexture: false
};
outlinePass.edgeStrength = params.edgeStrength;
outlinePass.edgeGlow = params.edgeGlow;
outlinePass.visibleEdgeColor.set(0xffffff);
outlinePass.hiddenEdgeColor.set(0xffffff);
composer.render(scene, camera);
}
}
The path to THREE.js should be correct. Is it a problem with render?
I had a similar issue. Upon looking at another example, I found that setting outlinePass.renderToScreen = true allowed it to work. It might not be there depending what version of the the outlinePass.js you are using. I looked at the code on the deployed example and it is there.
I want to see the fps
my code pen
(THE CODE PEN IS EDITED AND IS WORKING CORRECTLY)
I followed
this
tutorial in packtpub.com
I also followed the instructions in github repo
I also tried npm install though code pen npm installer
which gave me this line
import installStats from "https://cdn.skypack.dev/install-stats#1.0.6";
relevent code
import installStats from "https://cdn.skypack.dev/install-stats#1.0.6";
var stats = new Stats();
stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );
.....
const clock = new THREE.Clock();
const tick = () => {
// stats.begin();
const elapsedTime = clock.getElapsedTime();
// Update controls
controls.update();
// Update time
waterMaterial.uniforms.uTime.value = elapsedTime;
// Render
renderer.render(scene, camera);
// stats.end();
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
I found that changing the stats cdn version from r17 to r16 can make it work.
use
https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js
instead of
https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js
and I also got rid of this line
import installStats from "https://cdn.skypack.dev/install-stats#1.0.6";
I want to use a pre-created canvas with three.js. From the tutorials and other posts I've read, this should work:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d"); // <--- This causes the error below!
const renderer = new THREE.WebGLRenderer( { canvas: canvas } );
However, in my browser console (Safari v14 and Chrome v86), I get the following error:
THREE.WebGLRenderer: Error creating WebGL context.
I've also tried adding
<canvas id='myCanvas'></canvas>
and using:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // <--- This causes the same error!
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
and get the same issues.
I've also tried adding:
window.onload = function() {
...
};
to ensure the DOM has loaded, etc.
If I remove the getContext("2d") lines then it works?
I'm using three.js version 0.120.
Why does this cause an issue?
Three.js only throws this error in one place, and luckily it's doing something very simple: Getting a context from a canvas. It uses HTMLCanvasElement.getContext to do this, and only throws the error if the result is null.
HTMLCanvasElement.getContext will only allow you to request one context type. You can request the same type (or compatible, in the case of webgl and webgl2) again, but it will return the original context created on the canvas. After the first request establishes the in-use context, subsequent requests for incompatible types will return null.
let ctx_2d_1 = mycanvas.getContext( '2d' )
let ctx_2d_2 = mycanvas.getContext( '2d' )
console.log( ctx_2d_1 === ctx_2d_2 ) // true
let ctx_2d = mycanvas.getContext( '2d' )
let ctx_webgl = mycanvas.getContext( 'webgl' )
console.log( ctx_2d ) // CanvasRenderingContext2D
console.log( ctx_webgl ) // null
let ctx_webgl = mycanvas.getContext( 'webgl' )
let ctx_2d = mycanvas.getContext( '2d' )
console.log( ctx_webgl ) // WebGLRenderingContext
console.log( ctx_2d ) // null
Because you are creating the 2d context before calling the WebGLRenderer constructor, the constructor can't get a valid WebGLRenderingContext from the canvas. Instead, it gets a null, and so it throws the error.
If you want to draw 2D on top of 3D (or vice versa), you will either need to layer canvases of different contexts, or use a plane to render the 2D information as a texture within the WebGL (three.js) context.
I am trying to import STL files and then reduce the number of vertices using this great mesh simplification function:
http://www.blurspline.com/labs/3D/bunny/
https://github.com/mrdoob/three.js/issues/5806
It seems that geometry.vertices returns "Undefined" after I import via STLLoader. And I think this has to be the reason this does not work for me.
I´m using this code to import it;
var loader = new THREE.STLLoader();
loader.load( 'mySTLfile.stl', function ( geometry ) {
geometriesParams.push({type: 'Test', args: [ ], scale: 100, meshScale:1 });
console.log("Vertices:"+geometry.vertices);
THREE.Test = function() {
return geometry.clone();
};
updateInfo()
} );
Why aren't there any vertices on imported STL files? And does anyone know of a solution to this?
STLLoaderreturns THREE.BufferGeometry.
In your loader callback, you can convert your geometry to THREE.Geometry like so:
var geometry = new THREE.Geometry().fromBufferGeometry( geometry );
three.js r.84
I am using the STLLoader to import models into a scene that also has other objects. After that, I export the entire scene using STLExporter. Any STL models previously imported does not appear to export with the rest of the scene. Why is that and how can I make it work?
In addition to three.min.js, the following libraries were also used:
STLExporter.js
STLLoader.js
fileSaver.js
Import:
var stlLoader = new THREE.STLLoader();
stlLoader.load( 'models/anymodel.stl', function ( geometry ) {
var model = new THREE.Mesh(geometry, material);
model.position.set(0, 0, 0);
model.name="model"
scene.add(model);
})
Export:
var exporter = new THREE.STLExporter();
var txt = exporter.parse(scene);
var blob = new Blob([txt], { type: "text/plain;charset=utf-8" });
saveAs(blob, "export.stl");
In the STLExporter, there is a line that checks if an object is valid geometry. If not, the object is skipped. A model imported with STLLoader does not appear have valid geometry.