How do I use php with three js

Hi, 3 weeks ago I finished Bruno Simon’s course and I was wondering how to include three.js in my project, which was in PHP, so I spent almost 2 weeks now trying to figure it. I didn’t find any video on Youtube that might help me. I tried using webpack as Bruno answered me on the help section in discord but the import didn’t work and also could not use a dev server, I had to built the project and replace the htdocs xampp files everytime wich was very tedious. This is the code from the webpack project:


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
    <script src="bundle.js"></script>
    <canvas class="webgl"></canvas>


import './main.css';
import * as THREE from 'three';

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const width = 800
const height = 600

// Scene
const scene = new THREE.Scene()

// Object
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000'
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)

// Camera
const camera = new THREE.PerspectiveCamera(75, width / height)
camera.position.z = 3

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
renderer.setSize(width, height)
renderer.render(scene, camera)

And a photo of it to see it more clear:

Please if you need more information about the code tell me. Thanks

everything you see in /dist is self contained, you can upload it everywhere. there are no imports in that code any longer. so just include the bundle.js with a script tag, give your html a canvas, root tag whatever (look into dist/index.html) and it will work. may i ask though, for what do you need php? hard to imagine spending 2 weeks making a website show. is it possible to throw it out?

Hey, first of all, thanks for your assistance, well what I meant with " the import didn’t work" was that even after using ``npm install --save three , the import * as THREE from ‘three’; ``` on index.js was not working properly because nothing showed up on the screen and that code im sure that was nothing wrong with it since it was on Bruno’s course. And I made a website, well, started it, some months ago just to use what I learnt and try to make it as nice and clean as possible, so I thought that including three.js using what I learnt from the course would be great. As I said, on the course, everything was done using webpack while my website didn’t, and the main file was index.php because I need it to retrieve some things from a MySQL database. I thought that adapting my project to webpack would be great since I read on a forum that it optimises the code, but anyways I am just trying on “draft” projects like this one until I find the way to adapt my real project to webpack.

(/cc javascript - How do I use PHP with three js - Stack Overflow)

I think that “how to use php with three.js” might be the wrong question to get answers that are helpful to you. JavaScript files are static content from a webserver’s perspective, it doesn’t particularly matter what JS libraries (three.js or otherwise) you are using.

In the past I have used NGINX to serve static files along with a PHP server, but there are many other ways of serving static content associated with a PHP server.

Hey guys nevermind, I am just an idiot, you just have to make your project normally, and then once you build it, you can just change your index.html file to index.php and it works fine