And it works! Need to comment this line in the main():
importGlobals(webview)
Using the Three.js from https://www.code3dgames.com/
Only in one example, these lines, I modified it from:
// Physics settings
Physijs.scripts.ammo = '/ammo.js';
Physijs.scripts.worker = '/physijs_worker.js';
to
// Physics settings
//Physijs.scripts.ammo = '/ammo.js';
//Physijs.scripts.worker = '/physijs_worker.js';
Physijs.scripts.ammo = 'https://www.code3dgames.com/ammo.js';
Physijs.scripts.worker = 'https://www.code3dgames.com/physijs_worker.js';
It returned this:
393:28 SecurityError: The operation is insecure.
Here is the whole code of myJS:
-- MyJS
function main()
-- Create a webview
webview = WebView()
-- Import initial global values
-- importGlobals(webview)
-- Load Three.js
print("Loading modules...")
webview:loadJS('https://code3dgames.com/three.js', true)
webview:loadJS('https://code3dgames.com/controls/FlyControls.js', true)
webview:loadJS('https://code3dgames.com/controls/OrbitControls.js', true)
webview:loadJS('https://code3dgames.com/physi.js', true)
webview:loadJS('https://code3dgames.com/tween.js', true)
webview:loadJS('https://code3dgames.com/sounds.js', true)
webview:loadJS('https://code3dgames.com/noise.js', true)
webview:loadJS('https://code3dgames.com/scoreboard.js', true)
print("Done loading modules.")
-- Load the user code
webview:loadJS(JSCode4, true)
-- Display once the engine has initialised
webview:show()
end
JSCode4 = [[
// Physics settings
//Physijs.scripts.ammo = '/ammo.js';
//Physijs.scripts.worker = '/physijs_worker.js';
Physijs.scripts.ammo = 'https://www.code3dgames.com/ammo.js';
Physijs.scripts.worker = 'https://www.code3dgames.com/physijs_worker.js';
// The "scene" is where stuff in our game will happen:
var scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3( 0, -100, 0 ));
var flat = {flatShading: true};
var light = new THREE.AmbientLight('white', 0.2);
scene.add(light);
// The "camera" is what sees the stuff:
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 500;
camera.position.y = 200;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
// The "renderer" draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// ******** START CODING ON THE NEXT LINE ********
function addGround() {
var w = window.innerWidth;
var h = window.innerHeight;
var shape = new THREE.BoxGeometry(2*w, h ,1);
var cover = new THREE.MeshBasicMaterial({color: 'lawngreen'});
var ground = new Physijs.BoxMesh(shape, cover, 0)
ground.position.y = -h/2;
ground.receiveShadow.enabled = true;
scene.add(ground);
return ground;
}
var ground = addGround();
function addLight() {
var light = new THREE.PointLight('white', 0.4);
light.position.set(50,200,-100);
light.castShadow = true;
scene.add(light);
return light;
}
var light1 = addLight();
function Launcher() {
this.angle = 0;
this.power = 0;
this.draw();
}
Launcher.prototype.draw = function() {
var direction = new THREE.Vector3(0, 1, 0);
var position = new THREE.Vector3(0, -100, 250);
var length = 100;
this.arrow = new THREE.ArrowHelper(
direction,
position,
length,
'yellow'
);
scene.add(this.arrow);
};
Launcher.prototype.vector = function() {
return new THREE.Vector3(
Math.sin(this.angle),
Math.cos(this.angle),
0
);
}
Launcher.prototype.moveLeft = function() {
this.angle = this.angle - Math.PI/100;
this.arrow.setDirection(this.vector());
}
Launcher.prototype.moveRight = function() {
this.angle = this.angle + Math.PI/100;
this.arrow.setDirection(this.vector());
}
Launcher.prototype.powerUp = function() {
if (this.power >= 100) return;
this.power = this.power + 5;
this.arrow.setLength(this.power);
}
Launcher.prototype.launch = function() {
var shape = new THREE.SphereGeometry(10);
var material = new THREE.MeshPhongMaterial({color: 'yellow'});
var ball = new Physijs.SphereMesh(shape, material, 1);
ball.name = "Game Ball";
ball.position.set(0, 0, 300);
ball.castShadow = true;
scene.add(ball);
var speedVector = new THREE.Vector3(
2.5*this.power * this.vector().x,
2.5*this.power * this.vector().y,
-80
);
ball.setLinearVelocity(speedVector);
this.power = 0;
this.arrow.setLength(100);
};
function Basket(size, points) {
this.size = size;
this.points = points;
this.height = 100/Math.log10(size);
var r = Math.random;
this.color = new THREE.Color(r(), r(), r());
this.draw();
}
Basket.prototype.draw = function() {
var cover = new THREE.MeshPhongMaterial({
color: this.color,
shininess: 50,
specular: 'white'
});
var shape = new THREE.CubeGeometry(this.size, 1, this.size);
var goal = new Physijs.BoxMesh(shape, cover, 0);
goal.position.y = this.height/100;
scene.add(goal);
var halfSize = this.size/2;
var halfHeight = this.height/2;
shape = new THREE.CubeGeometry(this.size, this.height, 1);
var side1 = new Physijs.BoxMesh(shape, cover, 0);
side1.position.set(0, halfHeight, halfSize);
scene.add(side1);
var side2 = new Physijs.BoxMesh(shape, cover, 0);
side2.position.set(0, halfHeight, -halfSize);
scene.add(side2);
shape = new THREE.CubeGeometry(1, this.height, this.size);
var side3 = new Physijs.BoxMesh(shape, cover, 0);
side3.position.set(halfSize, halfHeight, 0);
scene.add(side3);
var side4 = new Physijs.BoxMesh(shape, cover, 0);
side4.position.set(-halfSize, halfHeight, 0);
scene.add(side4);
this.waitForScore(goal);
}
Basket.prototype.waitForScore = function(goal) {
goal.addEventListener('collision', this.score.bind(this));
}
Basket.prototype.score = function(ball) {
if (scoreboard.getTimeRemaining() == 0) return;
scoreboard.addPoints(this.points);
scene.remove(ball);
}
function Wind() {
this.draw();
this.change();
}
Wind.prototype.draw = function() {
var dir = new THREE.Vector3(1, 0, 0);
var start = new THREE.Vector3(0, 200, 250);
this.arrow = new THREE.ArrowHelper(dir, start, 1, 'lightblue');
scene.add(this.arrow);
}
Wind.prototype.change = function() {
if (Math.random() < 0.5) this.direction = -1;
else this.direction =1;
this.strength = 20 * Math.random();
this.arrow.setLength(5*this.strength);
this.arrow.setDirection(this.vector());
setTimeout(this.change.bind(this), 10000);
}
Wind.prototype.vector = function() {
var x = this.direction * this.stength;
return new THREE.Vector3(x, 0, 0);
}
function allBalls(){
var balls = [];
for (var i=0; i<scene.children.length; i++) {
if (scene.children[i].name.startsWith('Game Ball')) {
balls.push(scene.children[i]);
}
}
return balls;
}
var goal1 = new Basket(200,10);
var goal2 = new Basket(40, 100);
var launcher = new Launcher();
var wind = new Wind();
var scoreboard = new Scoreboard();
scoreboard.countdown(60);
scoreboard.score(0);
scoreboard.help(
'?????????????.' +
'???????????????.' +
'?????????.' +
'????!!!'
);
scoreboard.onTimeExpired(timeExpired);
function timeExpired() {
scoreboard.message("Game Over!");
}
// Animate motion in the game
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// Run physics
function gameStep() {
scene.simulate();
var balls = allBalls();
for (var i=0; i<balls.length; i++) {
balls[i].applyCentralForce(wind.vector());
if (balls[i].position.y < -100) scene.remove(balls[i]);
}
// Update physics 60 times a second so that motion is smooth
setTimeout(gameStep, 1000/60);
}
gameStep();
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
var code = event.code;
if (code == 'ArrowLeft') launcher.moveLeft();
if (code == 'ArrowRight') launcher.moveRight();
if (code == 'ArrowDown') launcher.powerUp();
//if (code == 'Arrow')
}
document.addEventListener('keyup', sendKeyUp);
function sendKeyUp(event) {
var code = event.code;
if (code == 'ArrowDown') launcher.launch();
}
]]
