Я экспериментирую с узлом js, express и тремя js.
У меня есть следующие файлы:
index.js:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.get('/js/client_world.js', function(req, res){
res.sendFile(__dirname + '/js/client_world.js');
});
io.on('connection', function(socket){
console.log("A user is connected");
socket.on('disconnect', function(){
console.log("User disconnected");
});
});
http.listen(8080, function(){
console.log("Listenng to port 8080")
});
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="/socket.io/socket.io.js"></script>
<script src="//threejs.org/build/three.min.js"></script>
<script src="/js/client_world.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var socket = io();
socket.on('connect', function(){
loadWorld();
});
</script>
</body>
</html>
и js / client_world.js:
var container, scene, camera, renderer, cube;
var loadWorld = function(){
//Setup------------------------------------------
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = -400;
camera.position.z = 400;
camera.rotation.x = .70;
scene = new THREE.Scene();
cube = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), new THREE.MeshNormalMaterial());
cube.rotation.z = .75
scene.add(cube);
renderer.render(scene, camera);
//Final touches-----------------------------------
container.appendChild( renderer.domElement );
document.body.appendChild( container );
};
Это работает так.Как я могу вызвать функцию loadWorld () без использования сокета?Я хотел бы интегрировать эту часть в программу, где порт 8080 не может использоваться для сокета.
Спасибо за поддержку.
Я пытаюсь объяснить, что я хочу сделать:есть сайт с 2 ссылками.Первый приводит к странице, отображающей данные из базы данных.Здесь вы можете ввести данные и сохранить их в базе данных.Вторая ссылка должна открыть страницу с графическим представлением.Этот сайт использует три JS.Теперь я ищу способ отображения трех js-графики в узле js с помощью Express и Pug.В приведенном выше примере работает только дисплей с тремя js.Но я не могу встроить его в проект с такой базой данных.
const express = require('express');
const seiten = require('./seiten.json');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const movieRouter = require('./movie');
const model = require('./movie/model');
var http = require('http').Server(express);
var io = require('socket.io')(http);
const app = express();
......
......
......
const server = app.listen(8080, () => {
console.log(`Express running → PORT ${server.address().port}`);
});
http.listen(8080, function(){
console.log("Listenng to port 8080")
});
Это даст мне ошибку: адрес уже используется 8080. Мой вопрос по этому поводу: Как я могу вызвать функцию loadWorld () без использования сокета?
Тем временем я попробовал следующее:
Я вызываю profile.pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
title Graphische Darstellung
body
block content
div.container
script(src='/three.min.js')
script(src='/client_world.js')
mit:
....
....
app.get('/profile', (req, res) => {
model.getAll().then(
movies => {
res.render('profile', {movies} );
},
error => res.send(error),
);
});
......
......
но отображается только пустая страница.