import React from "react";
import "./XtkViewer.css"
import * as XTK from "xtk"
class XtkViewer extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.initXtk()
}
initXtk() {
// create and initialize a 3D renderer
let r = new XTK.X.renderer3D();
r.container = "XtkViewer"
r.init();
// create a cube
let cube = new XTK.X.cube();
// skin it error
cube.texture.file = 'http://x.babymri.org/?xtk.png';
// window.console.log(cube)
// setting the edge length can also be skipped since 20 is the default
cube.lengthX = cube.lengthY = cube.lengthZ = 20;
// can also be skipped since [0,0,0] is the default center
cube.center = [0, 0, 0];
// [1,1,1] (== white) is also the default so this can be skipped aswell
cube.color = [1, 1, 1];
r.add(cube); // add the cube to the renderer
r.render(); // ..and render it
// add some animation
// r.onRender = () => {
// cube.transform.rotateX(1)
// cube.transform.rotateY(1)
// }
}
render() {
return (
<div className="XtkViewer" id="XtkViewer">Longer King</div>
)
}
}
export default XtkViewer
here is my code, I rendered a cube without the line code:"cube.texture.file = 'http://x.babymri.org/?xtk.png';"
But when I add this line of code, I get an error "Uncaught TypeError: fa.setTimeout is not a function".
Here is my reference code "https://github.com/xtk/lessons/blob/gh-pages/01/demo.js", and it runs well
Any help would be greatly appreciated!